如何将div置于div上方
如何将div置于div上方
提问于 2018-06-06 00:36:58
这就是我正在努力实现的目标。我尝试使用绝对位置，它似乎适用于一个屏幕尺寸，但不适用于其他屏幕尺寸。
.countdown {
width: 200px;
background: #b02d1b;
margin: 0;
border-radius: 5px;
color: #fff;
text-align: center;
padding: 5px;
position: absolute;
z-index: 1;
}
.countdown-bg {
width: 100%;
border-top: solid 1px #ccc;
position: absolute;
margin: 12px;
}<div class="countdown"> Final Hours </div>
<div class="countdown-bg"></div>
回答 1
Stack Overflow用户
发布于 2018-06-06 01:28:18
不带flexbox
将一个div包装在另一个div中。将外部div设为position: relative，内部div设为position: absolute。使用left和transform将内部div居中
.countdown {
position: relative;
border-top: solid 1px #ccc;
margin: 15px 0;
}
.countdown>.content {
width: 200px;
text-align: center;
background: #b02d1b;
border-radius: 5px;
color: #fff;
padding: 5px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
text-transform: uppercase;
}<div class="countdown">
<div class="content">Final Hours!</div>
</div>
使用flexbox
使用flexbox的优点是，您不必设置位置，并且可以使用justify-content居中。
.countdown {
border-top: solid 1px #ccc;
margin: 15px 0;
display: flex;
justify-content: center;
}
.countdown>.content {
width: 200px;
text-align: center;
background: #b02d1b;
border-radius: 5px;
color: #fff;
padding: 5px;
transform: translateY(-50%);
z-index: 1;
text-transform: uppercase;
}<div class="countdown">
<div class="content">Final Hours!</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50705010
复制相关文章
相似问题
腾讯云开发者
