position


1. 是什么

position属性规定元素的定位类型。任何元素都可以定位,

不论该元素本身是什么类型,绝对或固定元素会生成一个块级框,

相对定位元素会相对于它在正常流中的默认位置偏移。 

2. position属性有五个可选值: absolute、fixed、relative、static、inherit、sticky .

2.1 static
默认值。没有定位,元素出现在正常的流中。
忽略 top, bottom, left, right 或者 z-index 声明。
2.2 absolute
生成**绝对定位**的元素.

相对的是向上第一个不是static默认定位的元素,如果没有找到,则相对于document 
注:(document对象 -- 代表整个HTML 文档,可用来访问页面中的所有元素:)。

元素的位置通过left,top,right以及bottom属性进行规定。

##### 代码演示

   .father {
        width: 300px;
        height: 200px;
        margin-left: 100px;
        margin-top: 100px;
        position: absolute;
        background: yellow;
    }

    .child {
        width: 100px;
        height: 100px;
        position: absolute;
        background: green;
        top: 50px;
        left:50px;
    }
  <div class="father">
        <div class="child">child</div>
    </div>

为了更好的显示效果,父元素具有外边距,此时可以发现子元素相对于父元素的左上角定位。效果如下:
1.png

当去掉父元素的position:absolute是,效果图如下,此时子元素相对于document进行定位。效果图如下:
2.png
为了验证此时absolute相对document定位,编写如下代码

body{
        height: 0px;
    }

效果如下图所示:
3.png

2.3 fixed
 生成绝对定位的元素,相对于浏览器窗口进行定位,不随滚动条滚动。
 
 元素的位置通过left、top、right以及bottom属性进行规定。
.father {
        width: 300px;
        height: 200px;
        margin-left: 100px;
        margin-top: 100px;
        position: absolute;
        background: yellow;
    }

    .child {
        width: 100px;
        height: 100px;
        
        position: fixed;
        
        background: green;
        top: 0px;
      
      <div class="father">
        <div class="child">child</div>
    </div>

效果如图所示:

fixed.gif

2.4 relative
生成相对定位的元素,相对于其自身正常位置(这个位置是static的位置)进行定位。

例,如下面代码就是static状态下。

 .father {
        width: 300px;
        height: 200px;
        background: yellow;
    }

    .child {
        width: 100px;
        height: 100px;
        background: green;
    }
   <div class="father">
        <div class="child">child</div>
    </div>

效果如下图所示:
12.png

当child的css设置为relative时,会相对于原位置进行定位

.child {
        width: 100px;
        height: 100px;
        position: relative;
        background: green;
        top: 50px;
        left:50px;
    }

效果如下图所示
13.png

2.5 inherit
规定应该从父元素继承 position 属性的值。
2.6 sticky
css3新属性,实验性的属性,不推荐使用。

声明:coder-syl|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - position


Carpe Diem and Do what I like