CSS position

CSS position

CSS position 属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

切换窗口大小时位置不变。使用positon后标签会飘起，块级标签会变为行内标签，可通过增加左右距离拉伸边距。

 

position: fixed

  •  position: fixed 　　固定在页面的某个位置
  • top:0px; 　　　　  上边部分
  • right:0px; 　　　　右边部分
  • bottom: 0px;  　　下边部分
  • left: 0px; 　　　　 左边部分

position永久固定某个窗口

<html>
<body>

    <!--  像素长宽为50像素的框，字体为白色-->
    <div style="width: 50px;height: 50px;background-color: black;color: white;
    /* position: fixed 固定在页面的某个位置 */
    position: fixed;
    /* right:10px; 右边距离10像素 */
    right:10px;
    /* bottom: 10px; 下边距离10像素 */
    bottom: 10px;
    ;">xxx</div>
    <!--  创建大的背景框-->
    <div style="height: 5000px;background-color: cornflowerblue">123</div>

</body>
</html>
将小窗口固定再右下角，上下滚动小窗口不变
<html>
<head>
    <!--  添加两个样式分别交给body引用 -->
    <style>
        .head {
            /* height: 48px;设置像素 */
            height: 48px;
            /*  background-color: cornsilk;设置背景颜色 */
            background-color: cornsilk;
            /* color: #000;设置字体颜色 */
            color: #000;
            /* position: fixed 固定在页面的某个位置 */
            position: fixed;
            /* top: 0;  上边距离0像素 */
            top: 0;
            /* right: 0; 右边距离0像素 */
            right: 0;
            /*  left: 0; 左边距离0像素 */
            left: 0;
        }

        .body {
            /*  background-color: cornsilk;设置背景颜色 */
            background-color: antiquewhite;
            /* height: 5000px;设置像素 */
            height: 5000px;
            /*  margin-top: 48px;设置上边边距距离 */
            margin-top: 48px;
        }
    </style>
</head>
<body>
<div class="head">xxx</div>
<div class="body">xxx</div>
</body>
</html>
将列表固定再最上边，上下滚动列表不变，最上边数据不被遮挡

 

position: relative + position: absolute

  •  position: relative;　　  单使用没有效果，设置后可再子标签内设置position: absolute;属性，实现依据父标签固定定位。
  • position: absolute;　　实现在父标签含有position:relative; 属性时，实现依据父标签固定定位。

position父标签内永久固定窗口

<html>
<body>
　　<!--  添加边框并居中，添加position:relative; 属性-->
　　<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
    　　<!--  添加position: absolute; 属性，实现依据父标签固定定位，添加框，固定再指定位置-->
    　　<div style="position: absolute;left: 0;bottom: 0px;width: 50px;height: 50px;background-color: black"></div>
　　</div>
</body>
</html>

效果：

　　
 
　　

 

position 也可以通过 relative + absolute 完成三层 或 多层效果

<html>
<body>

    <!--  添加三层层样式 -->
    <div style="
        /* z-index: 10; 设置层级顺序为最大 */
        z-index: 10;
        /* position: fixed; 添加占用页面位置 */
        position: fixed;top: 50%;left: 50%;
        /* 根据三层框自定义移动位置 使其在中间 */
        margin-left: -250px;margin-top: -200px;
        /* 设置背景为白色长宽400，500像素的样式 */
        background-color: white;height: 400px;width: 500px;
        ;"></div>

    <!--  添加二层层样式 -->
    <div style="
        /* z-index: 9; 设置层级顺序为二层 */
        z-index: 9;
        /* position: fixed; 添加占用页面位置 */
        position: fixed;
        /* 设置背景颜色，并设置长度0为全部覆盖 */
        background: black;top: 0;bottom: 0;right: 0;left: 0;
        /* 设置透明度 */
        opacity: 0.5;
        "></div>

    <!-- style 设置属性、height:48px 设置背景分辨率、background-color: green(绿) 修改背景颜色、 -->
    <div style="height: 5000px;background-color: green;">
        xxxxxx
    </div>

</body>
</html>

 

posted @ 2019-02-21 16:34  kevin.Xiang  阅读(181)  评论(0)  编辑  收藏  举报