时间戳

首页 > 解决方案 > 绝对位置div不起作用css

html - 绝对位置div不起作用css

问题描述

我有一个相对定位的父元素。我也有两个绝对定位的子元素，我想要在各自的角落（左上角和右上角）。但是，这两个元素都不会出现在 DOM 中。我对这两个元素都有明确的高度和宽度。我也尝试改变这z-index两个元素无济于事。

这是标记和CSS：

.first_customer, .all_customer {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.inner {
    text-transform: uppercase;
    width: 100%;
}

.inner > * {
    margin: 20px auto;
    background-color: #fad63a;
    padding: 7px;
    border-radius: 3px;
    box-shadow: inset 0 0 10px #000;
    border: 1px solid #fff;
    text-align: center;
    width: 85%;
}

.inner > h4 {
    font-size: 10px;
}

.inner > h6 {
    font-size: 10px;
}

.inner > p {
    font-size: 10px;
}

.topleftcorner, .toprightcorner {
    position: absolute;
    min-width: 100px;
    min-height: 100px;
}

.topleftcorner {
    top: 0;
    left: 0;
    z-index: 2;
}

 
<div class="first_customer">
    <div class="topleftcorner"></div>
    <div class="toprightcorner"></div>

    <div class="inner">
        <h4>New Customers</h4>
        <h6>$10 Gift</h6>
        <p>Dry Cleaning</p>
    </div>
</div>

标签： htmlcss

解决方案

它已经开始工作了。我刚刚添加了背景颜色和位置正确的 div。

.first_customer,.all_customer{
 flex: 1 1 0;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}

.inner{
  text-transform: uppercase;
  width: 100%;
}

.inner > *{
  margin: 20px auto;
  background-color: #fad63a;
  padding: 7px;
  border-radius: 3px;
  box-shadow: inset 0 0 10px #000;
  border: 1px solid #fff;
  text-align: center;
  width: 85%;

}

.inner > h4{
  font-size: 10px;
}

.inner > h6{
  font-size: 10px;
}

.inner > p{
  font-size: 10px;
}

.topleftcorner,.toprightcorner{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #000;
}

.topleftcorner{
  top: 0;
  left: 0;
  z-index: 2;
}

.toprightcorner {
  top: 0;
  right: 0;
  z-index: 2;
}
<div class="first_customer">

  <div class="topleftcorner"></div>
  <div class="toprightcorner"></div>

  <div class="inner">
    <h4>New Customers</h4>
    <h6>$10 Gift</h6>
    <p>Dry Cleaning</p>
  </div>

</div>

推荐阅读