首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将div置于div上方

如何将div置于div上方
EN

Stack Overflow用户
提问于 2018-06-06 00:36:58
回答 1查看 61关注 0票数 0

这就是我正在努力实现的目标。我尝试使用绝对位置,它似乎适用于一个屏幕尺寸,但不适用于其他屏幕尺寸。

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="countdown"> Final Hours </div>
<div class="countdown-bg"></div>

EN

回答 1

Stack Overflow用户

发布于 2018-06-06 01:28:18

不带flexbox

将一个div包装在另一个div中。将外部div设为position: relative,内部div设为position: absolute。使用lefttransform将内部div居中

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="countdown">
  <div class="content">Final Hours!</div>
</div>

使用flexbox

使用flexbox的优点是,您不必设置位置,并且可以使用justify-content居中。

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="countdown">
  <div class="content">Final Hours!</div>
</div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50705010

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档