标签：relative absolute style idt width round class -- 默认值
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 像素
标签：relative absolute style idt width round class -- 默认值
原文地址：https://www.cnblogs.com/weidahange/p/12366675.html
