css中position属性
2021-04-15 07:26
标签：relative absolute style idt width round class -- 默认值 position 属性规定元素的定位类型。 属性值：static--默认值没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 absolute--绝对定位，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定（相对于第一个有position属性的父元素，没有相对于根元素） （这样ding4会相对于根元素定位） （这样ding4会相对于ding3定位） fixed--固定定位，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 relative--相对定位，相对于其正常位置进行定位。"left:20" 会向元素的 LEFT 位置添加 20 像素 css中position属性 标签：relative absolute style idt width round class -- 默认值 原文地址：https://www.cnblogs.com/weidahange/p/12366675.htmldiv 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 }
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 }