当使用z索引进行重叠时，如何在div中定位我的文本？

Question

当使用z索引进行重叠时，如何将我的文本放置在div内。

我需要重新创造这个：

​

​

我可以复制文本部分，但它位于div (灰色背景)之外：

​

​

我怎么才能把短信往上挪呢？

奖金：

如何将红色边框扩展到左边文本附近的div (以向上移动)？

Codepen:

https://codepen.io/ogonzales/pen/qBOYrQy

代码：

<div id="header"><!-- flex container -->

  <div class="box" id="bluebox" style="margin-left: 0%;"><!-- flex item -->
    <div>
      <div id="element-1" class="element">ELIM</div>
      <div id="element-2" class="element">ONLINE</div>
    </div>
  </div>

  <div class="box" id="redbox"><!-- flex item -->
      <p style="background-color: black; color: white;">EXPANDIENDO LA PALABRA DE DIOS POR TODO EL MUNDO</p>
  </div>

</div>

Answer 1

不知道这是不是你的意思？但是你可以减少线的高度，使文本行更接近；而不是有单独的元素，随着边距的变化和z-索引的变化。

就像这样：

.title {
  font-size: 75px;
  line-height: 0.8em;
}

其中：

<div class="title">
  <div>ELIM</div>
  <div>ONLINE</div>
</div>

​

#header {
  display: flex; /* establish flex container */
  flex-direction: row; /* make main axis horizontal (default value) */
  justify-content: center; /* center items horizontally, in this case */
  align-items: center; /* center items vertically, in this case */
  height: 200px; /* for demo purposes */
  border: 1px solid black; /* for demo purposes */
  background-color: #eee; /* for demo purposes */
}

.box {
  width: 400px;
  margin: 10px;
  text-align: center;
}

.elim_online {
  font-size: 3.9em;
}

#bluebox { 
  background: aqua;
}
#redbox { 
  border: solid red;
  background:
    repeating-linear-gradient(-45deg,transparent 0 100px,green 100px 102px) 0 0,
    repeating-linear-gradient(-45deg,transparent 0 140px,green 140px 142px) 0 0/100% 80%,
    repeating-linear-gradient(-45deg,transparent 0 120px,green 120px 122px) 40px 10%/100% 50%;
  background-repeat:no-repeat;
}

.title {
  font-size: 75px;
  line-height: 0.8em;
}

<div id="header"><!-- flex container -->

  <div class="box" id="bluebox" style="margin-left: 0%;"><!-- flex item -->
    <div class="title">
      <div>ELIM</div>
      <div>ONLINE</div>
    </div>
  </div>

  <div class="box" id="redbox"><!-- flex item -->
      <p style="background-color: black; color: white;">EXPANDIENDO LA PALABRA DE DIOS POR TODO EL MUNDO</p>
  </div>

</div>

​