CSS之position详解

Zuckjet

定义和用法

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的时候,会发生三件事:

  1. 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。
  2. 该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 <span> ,设置 absolute 之后发现它可以设置宽高了)。
  3. 如果该元素是块级元素,元素的宽度由原来的 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为定位对象的,按照浏览器的窗口进行定位。

阅读 8.3k

前端知识记录
记录web前端学习过程

学如逆水行舟,不进则退。

434 声望
653 粉丝
0 条评论

学如逆水行舟,不进则退。

434 声望
653 粉丝
文章目录
宣传栏