Da'sBlog

position:absolute-top,right,bottom,left为0使用

绝对定位一直用起来非常方便,直接脱离文本流。偶然发现它还有个超强的功能。竟然可以撑开盒子宽高。

对外

默认情况下,看代码;盒子如果设置 宽高后 设置绝对定位,bottom为0会自动抵底部。

mark

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wai{
position:relative;
top: 300px;
left: 300px;
width: 233px;
height: 370px;
background-color: yellow;
}
.nei{
position: absolute;
/*top: 0px;*/
/*left: 0px;
right: 0px;*/
bottom: 0px;
width: 100px;
height: 100px;
background-color: rgba(200,200,200,0.7);
}
</style>
</head>
<body>
<div class="wai">
<div class="nei">
<!-- <div class="nei-item1">1</div>
<div class="nei-item2">2</div> -->
</div>
</div>
</body>
</html>

当我们同时设置bottom和top,nei盒子会自动抵触顶部。说明top优先级要比bottom高。

当我们这个时候把nei盒子的高度去掉,这个时候神奇的事情发生了。nei的高度被撑开。

mark
同理width不设置,然后设置left,right为零,nei的宽度也会被撑开.

为了确认宽高是来源于最邻近的定位点,而不是父级,我们在wai内在加个盒子wai2并设置宽高。

1.nei盒子的宽高完全由上级定位节点,而不是父级确定。
2.nei盒子完全覆盖掉wai2的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wai{
position:relative;
top: 300px;
left: 300px;
width: 233px;
height: 370px;
background-color: yellow;
}
.wai2{
width: 100px;
height: 100px;
background-color: yellow;
}
.nei{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: red;
<!--background-color: rgba(200,200,200,0.7);-->
}
</style>
</head>
<body>
<div class="wai">
<div class="wai2">
<div class="nei">
</div>
</div>
</div>
</body>

mark

对内

假如nei盒子的内部有其余盒子呢,比如我们在内部加两个盒子 不设置宽度。只设置高度。宽度可以继承。

而且nei盒子的宽高 还是wai盒子的宽高。但是nei盒子的内部盒子的高度已经溢出。

mark

当nei盒子的内部盒子设置百分比时候,是相对于父级。同理height也是相对父级。可以设置都是50% 50%看下

mark

总结来说。利用这个特性,我们内部无需再设置宽度。可直接继承。这样的好处可以实现响应式的变化。

坚持原创技术分享,您的支持将鼓励我继续创作!