html - 窄 DIV 上的图层图像

Question

我想在DIV中做竖线

然后我想在垂直线上对 img 进行分层。(图片是我想要的结果)

我的源代码是这样的。

<div style="background-color:gray;width:1px;height:100%;"></div>
<img src="circle.png">

<img src="triangle.png">

如何对这些元素进行分层？？？

Answer 1

您需要做一些数学运算才能在中心调整它。

.outer-flex {
  display: flex;
  width: 40px;
  align-items: center;
  position: absolute;
}

.line {
  background-color: gray;
  width: 1px;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}

.circle {
  position: absolute;
  left: calc(50% - 15px);
  top: 20px;
  border: 5px solid white;
  border-radius: 20px;
}

.arrow {
  position: absolute;
  top: 70vh;
  left: calc(50% - 15px)
}

<div class="outer-flex">
  <div class="line"></div>
  <img src="https://www.marylandeyeassociates.com/wp-content/uploads/2015/03/red-dot-hi.png" width="21px" class="circle">

  <img src="https://image.flaticon.com/icons/png/512/60/60995.png" width="31px" class="arrow">
</div>