CSS 定位

 

 

 

1.定位

 

 

（1）position定位属性；默认值是static，无定位。相对定位：相对于原来的位置来说的。绝对定位：相对于最近的一个被定位过的祖先元素标签 

（2）定位示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>14定位示例</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        /*让标签定位在一个位置,距离网页的上面和左面各是多少像素的位置    */

        .c1,
        .c2,
        .c3,
        .c4 {
            height: 150px;
            width: 150px;
        }

        .c1 {
            background-color: red;
        }

        /* 相对定位 */
        .c2 {
            background-color: green;
            /*position: static;   !* position属性就是定位相关的，默认值是static *!*/
            position: relative; /* relative表示相对定位，相对于自己原先的位置 */
            left: 400px;
            top: 150px;
        }

        .c3 {
            background-color: blue;
        }

        /* 绝对定位 */
        .c4 {
            background-color: darkcyan;
            position: absolute; /* 绝对定位,相对与被定位过的父标签的位置 */
            top: 150px;
            left: 400px;
        }

    </style>

</head>
<body>


<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
<div class="c2">CC2
    <div class="c4">C4</div>
</div>
</body>
</html>

 

 

2.fixed 固定定位（返回顶部按钮通常用这个做）

 

 

 /* 固定定位，在界面中，位置不会变化*/
        .fixed-test {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: blueviolet;
        }

<div class="fixed-test">返回顶部</div>
 

 

posted @ 2019-02-11 16:00  _小溢  阅读(162)  评论(0)    收藏  举报