可变高度上的CSS绝对位置
用户1355300
我在父div内有两个div。我想放置div，以便div 1的位置在bottom:0父div处是绝对的，并且div 2始终位于div 1的顶部。
我使用绝对位置放置div。但是，问题是div 1的高度可变。在这种情况下，如何将div 2放在div 1的顶部？请参阅所附图片：
我正在尝试此操作，但是它不起作用：
HTML：
<div class="box">
<div class="wrap">
<div class="box2">box 2</div>
<div class="box1">box1</div>
</div>
</div>
CSS：
.box{
width: 200px;
height: 200px;
background: green;
position: relative;
}
.wrap{
position: absolute;
bottom: 0;
border: 1px solid blue;
}
.box1{
background: yellow;
height: 50px;
position: relative;
}
.box2{
background: red;
position: absolute;
top: 0;
}
科比
你快到了。
尝试以下操作-基本上从框中删除位置，然后将宽度设置为.wrap：
.wrap{
position: absolute;
bottom: 0; left:0;right:0;
border: 1px solid blue;
}
.box1{
background: yellow;
}
.box2{
background: red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS全屏显示-绝对位置与高度的100％
- 2
<ul>的绝对位置<li>不调整父<div>的高度
- 3
绝对位置：负值
- 4
CSS z-index不起作用（绝对位置）
- 5
HTML / CSS-根据页面中心分配绝对位置
- 6
CSS：绝对位置div高于父div
- 7
绝对位置时CSS边框属性的奇怪行为
- 8
CSS：父母不会清除绝对位置的孩子
- 9
css。绝对位置DIV中的垂直中心
- 10
带有显示表格单元的父级中的css绝对位置子级高度在IE中不起作用
- 11
带绝对位置的CSS缩放
- 12
CSS溢出隐藏和绝对位置
- 13
绝对位置没有高度
- 14
CSS：绝对位置和相对位置
- 15
解释这种绝对位置的css行为
- 16
将父级的高度与子级元素相匹配-相对位置和绝对位置
- 17
绝对位置，高度百分比和flexbox
- 18
CSS：位置固定在绝对位置
- 19
设置为背景的图像高度（绝对位置）
- 20
使用CSS旋转HTML绝对位置
- 21
CSS缩放（带绝对位置）
- 22
CSS绝对位置未定位按钮
- 23
CSS div位置绝对值，高度可变以扩展容器
- 24
更改div的高度并设置绝对位置中断引导响应
- 25
CSS：相对位置在相对位置div中的绝对位置
- 26
绝对位置元素上的高度100％
- 27
父母的相对位置成长为适合孩子的绝对位置高度
- 28
绝对位置崩溃
- 29
CSS 相对与绝对位置
我来说两句