定位布局 (fixed)

作者: 爱新觉罗狗子 | 来源:发表于2016-11-23 20:32 被阅读0次

css布局方案
定位布局 (fixed)
HTML 布局与定位
网格布局介绍
CSS fixed 布局嵌套的一些问题
React 同时使用Flex Fixed
position: sticky; 粘性布局
安卓键盘弹出时，影响定位的布局
深入理解position sticky 粘性定位
29.vue解决fixed定位出现问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位1.html</title>
    <!-- <link rel="stylesheet" href="css/reset.css"> -->
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .all{
        width: 980px;
        height: 1000px;
        background-color: #ccc;
        margin: 0 auto;
        font-size: 50px;
        text-align: center;
    }
    .xgg{
        width: 200px;
        height: 400px;
        background-color: pink;
        text-align: center;
        font-size: 20px;
        /* 位置，定位 */
        /* position 的值 决定了是哪种定位方式
            fixed：基于浏览器窗口定位*/
        position: fixed;
         /*可以写像素，可以写百分比，不可以写方位*/
        top: 50px;
        left: 50px;
        /*right: 50px;
        bottom: 50px;*/

        /* 总结：
                fixed定位总结：
                    1.脱离文档流。
                    2.元素属性改变，不再是行块标签，而是定位元素。
                    3.默认内容撑开大小。
                    4.可以撑开宽高，以及其他的CSS样式。
                    5.基于浏览器窗口进行定位。
                    6.一般用于小广告，小工具。
        */
    }
    .xxg{
        width: 200px;
        height: 400px;
        background-color: yellow;
        font-size: 20px;
        text-align: center;
        position: fixed;
        top: 50px;
        right: 50px;
    }
    </style>
</head>
<body>

    <div class="all">
        大日本帝国万岁
    </div>

    <div class="xgg">
        安倍晋三万岁
    </div>
    <div class="xxg">
        日本帝国主义万岁
    </div>
    
</body>
</html>