通过堆叠 html 个元素生成一个简单的十字

Question

我正在尝试在父元素 (box) 中生成一个简单的交叉（使用 vertical 和 horizontal 组件），但未能成功。

.box {
  width: 50vmin;
  height: 50vmin;
  background-color: blue;
  margin: 0 auto;
}

.vertical {
  position: absolute;
  width: 10%;
  height: 80%;
  top: calc((100% - 80%) / 2);
  left: calc((100% - 10%) / 2);
  background-color: black;
}

.horizontal {
  position: absolute;
  width: 80%;
  height: 10%;
  top: calc((100% - 10%) / 2);
  left: calc((100% - 80%) / 2);
  background-color: black;
}

<div class="box">
  <div class="vertical"></div>
  <div class="horizontal"></div>
</div>

我预期的输出是一个位于蓝色框内的黑色十字。谁能告诉我哪里出错了？

感谢您的帮助！

Answer 1

使父元素 .box 相对于 .vertical 和 .horizontal 相对于 .box 而不是 window（或其他具有相对元素的父元素） ).

试试这个：

.box {
 width: 50vmin;
 height: 50vmin;
 background-color: blue;
 margin: 0 auto;
 position: relative; /* CHANGED HERE */
}

.box {
  width: 50vmin;
  height: 50vmin;
  background-color: blue;
  margin: 0 auto;
  position: relative;
}

.vertical {
  position: absolute;
  width: 10%;
  height: 80%;
  top: calc((100% - 80%) / 2);
  left: calc((100% - 10%) / 2);
  background-color: black;
}

.horizontal {
  position: absolute;
  width: 80%;
  height: 10%;
  top: calc((100% - 10%) / 2);
  left: calc((100% - 80%) / 2);
  background-color: black;
}

<div class="box">
  <div class="vertical"></div>
  <div class="horizontal"></div>
</div>

通过堆叠 html 个元素生成一个简单的十字

Generating a simple cross by stacking html elements

html

css

absolute