Question

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

这是标记和css：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

它已经在工作了。我只是添加了背景颜色和位置正确的div。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

几乎在那里，需要对右角进行一些更改。

＆＃13;

.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;
  background: red;
  top: 0;
}

.topleftcorner{
  left: 0;
  z-index: 2;
}

.toprightcorner{
  right: 0;
  z-index: 2;
}

＆＃13;

<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>

＆＃13;

绝对位置div不工作css

2 个答案: