css中position属性

时间：2020-02-26 14:10:06 收藏：0 阅读：80

position 属性规定元素的定位类型。

属性值：static--默认值没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　　　 absolute--绝对定位，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定（相对于第一个有position属性的父元素，没有相对于根元素）

<div class="ding">
      <div class="ding2">
        <div class="ding3">
          <div class="ding4"></div>
        </div>
      </div>

 1 .ding{
 2   width: 400px;
 3   height: 400px;
 4   background:red;
 5   padding: 40px;
 6   /* position: relative;
 7   left: 100px; */
 8 }
 9 .ding2{
10 
11   width: 350px;
12   height: 350px;
13   background: #000;
14   
15 }
16 .ding3{
17   width: 200px;
18   height: 200px;
19   background:yellow;
20   /* position: absolute;
21   left:10px;
22   top:100px; */
23 }
24 .ding4{
25   width: 100px;
26   height: 100px;
27   background: green;
28   position: absolute;
29   left:20px;
30   top:20px;
31 }

（这样ding4会相对于根元素定位）

 1 .ding{
 2   width: 400px;
 3   height: 400px;
 4   background:red;
 5   padding: 40px;
 6   /* position: relative;
 7   left: 100px; */
 8 }
 9 .ding2{
10 
11   width: 350px;
12   height: 350px;
13   background: #000;
14   
15 }
16 .ding3{
17   width: 200px;
18   height: 200px;
19   background:yellow;
20   position: absolute;//fixed,relative

21   
23 }
24 .ding4{
25   width: 100px;
26   height: 100px;
27   background: green;
28   position: absolute;
29   left:20px;
30   top:20px;
31 }

（这样ding4会相对于ding3定位）

　　　　 fixed--固定定位，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

　　　　　 relative--相对定位，相对于其正常位置进行定位。"left:20" 会向元素的 LEFT 位置添加 20 像素