CSS之position详解

最新推荐文章于 2024-04-26 22:14:41 发布

BlizzardWu

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量6.9k

点赞数 7

分类专栏：前端文章标签： css html

原文链接：https://segmentfault.com/a/1190000010699788

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

定义和用法

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position属性有五个可选值，分别是absolute、fixed、relative、static、inherit：

absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
relative: 生成相对定位的元素，相对于其正常位置进行定位。
static: 默认值。没有定位，元素出现在正常的流中（忽略 top、bottom、left、right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。

relative

relative是相对于其正常文本流中的位置进行偏移。如下代码：

<html lang="en">
    <head>
        <style type="text/css">
           #item1 {
               width:100px;
               height:100px;
               background-color:green;
           }
           #item2 {
               width:100px;
               height:100px;
               background-color:red;
           }
         </style>
    </head>
    <body>
           <div id="content">
            <div id="item1" >item1</div>
            <div id="item2">item2</div>
        </div>
    </body>
</html>

上述代码显示结果如下：
在这里插入图片描述

若把上述代码中css样式文件改为：

#item1 {
   width:100px;
   height:100px;
   background-color:green;
}
#item2 {
   width:100px;
   height:100px;
   background-color:red;
   position:relative;
   left:20px;
   top:20px;
}

显示结果如下：
在这里插入图片描述

总结：relative是相对正常文档流的位置进行偏移，原先占据的位置依然存在，也就是说它不会影响后面元素的位置。left表示相对原先位置右边进行偏移，top表示相对原先位置下边进行偏移。当left和right同时存在，仅left有效，当top和bottom同时存在仅top有效。relative的偏移是基于对象的margin左上侧的。

absolute

为了便于观察，现将上述原始网页代码最外层div加上margin值。

#content {
  margin-left:100px;
  margin-top: 100px;
}

正常显示如下：
在这里插入图片描述

当修改css样式文件如下时：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
    width:100px;
    height:100px;
    background-color:red;
    position: absolute;
    left:20px;
    top:20px;
}
#content {
    margin-left:100px;
    margin-top: 100px;
}

显示结果如下：
在这里插入图片描述

由此可见当父级元素的position属性值为默认值时（static）,absolute是相对于浏览器窗口进行定位的。

如果设置content的position属性值为非默认值，那么absolute就是相对于该父级元素进行定位：

#content {
    margin-left:100px;
    margin-top: 100px;
    position: relative
}

显示效果如下图所示：
在这里插入图片描述

当修改css样式如下时：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
 width:100px;
 height:100px;
 background-color:red;
}
#content {
 margin-left:100px;
 margin-top: 100px;
 position:absolute;
 padding:20px;
 border:10px solid black;
}

显示结果为：
在这里插入图片描述
注意到变化了吗，当把外层div设置为absolute时，外层div宽度由原来的100%变为auto.
当把一个元素position属性设置为absolute或fixed的时候，会发生三件事：

把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。
该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如 <span> ，设置 absolute之后发现它可以设置宽高了）。
如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。

当修改css样式文件如下时：

#item1 {
    width:100px;
    height:100px;
    background-color:green;
}
#item2 {
 width:100px;
 height:100px;
 background-color:red;
 position:absolute;
 left:20px;
 top:20px;
}
#content {
 margin-left:100px;
 margin-top: 100px;
 position:absolute;
 padding:20px;
 border:10px solid black;
}

显示效果如下：
在这里插入图片描述
由此可见，如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

转载作者原文：https://segmentfault.com/a/1190000010699788 侵删！

BlizzardWu

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
CSS之position详解

定义和用法position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。position属性有五个可选值，分别是absolute、fixed、relative、static、inherit：absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
复制链接

扫一扫