Web前端篇：css定位

定位是一个相当复杂的话题，在去深入理解定位之前，我们先来聊一下之前我们的标准文档流下的布局。
应用:网页中小广告，返回顶部的UI。

1.Position属性

定位方式：top,right,bottom,left属性决定该元素的最终位置。

2.静态定位
静态定位意味着“元素默认显示文档流的位置”。没有任何变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态定位</title>
    <style type="text/css">
        .positioned{
            position: static;
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="positioned">我是静态定位的元素</p>
</body>
</html>

点击领取免费资料及课程

3.相对定位

相对定位的元素是在文档中的正常位置的偏移，但是不会影响其他元素的偏移。
参考点：以自身原来的位置进行定位，可以使用top,left,right,bottom对元素进行偏移。

现象：

   不脱离标准文档流，单独设置盒子相对定位之后，。不用top,left,right,bottom对元素进行偏移，那么与普通的盒子没什么区别。
    有压盖现象。用top,left,right,bottom对元素进行偏移之后，明显定位的元素的层级高于没有定位的元素(用top,left,right,bottom层级低)。

4.绝对定位

相对定位的元素并没有脱离标准文档流，而绝对定位的元素则脱离了文档流。在标准文档流中，如果一个盒子设置了绝对定位，那么该元素不占据空间。并且绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于根元素页面的左上角进行定位。
点击领取免费资料及课程

参考点：

 相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位。

5.应用

相对定位的盒子，一般用于“子绝父相”，布局模式参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            background-color:red;
            position: relative;
        }
        div .c1{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        div .c2{
            width: 100px;
            height: 100px;
            background-color:greenyellow;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1">子1</div>
        <div class="c2">子2</div>

    </div>
</body>
</html>
子绝父相

6.z-index:
点击领取免费资料及课程
z-index有以下几个规则：

扫描二维码关注公众号，回复： 6483343 查看本文章

z-index只应用在定位元素，默认z-index:auto;

      z-index取值为整数，数值越大，它的层级越高。
     如果元素设置了定位，没有设置z-index,那么谁写在后面的表示谁层级越高。
   从父现象，通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

Web前端篇：css定位

1.Position属性

猜你喜欢