在 3 个 div 后面放置一个 Div

Question

目的是对下面的设计进行编码，在垂直直线（桌面上为水平）上方出现 3 个框。

我尝试使用 :: before 伪选择器创建它。

代码如下：

HTML

<div className={clsx(styles.container__box, styles['container__box--1'])}>
        Box 1
      </div>
      <div className={clsx(styles.container__box, styles['container__box--2'])}>
        Box 2
      </div>
      <div className={clsx(styles.container__box, styles['container__box--3'])}>
        Box 3
      </div>

CSS

&__box {
        width: 25rem;
        height: 25rem;

        &:not(:last-child) {
            margin-bottom: 5rem;
        }
        
        &--1 {
            background-color: red;
            z-index: 100;
        }

        &--2 {
            background-color: green;
            position: relative;
            &::before {
                content: "";
                background-color: black;
                color: red;
                font-weight: bold;
                height: 85rem;
                width: 1rem;
                display: block;
                position: absolute;
                top: -120%;
                left: 50%;
            }
        }

        &--3 {
            background-color: yellow;
            z-index: 100;
        }
    }

我无法隐藏父选择器后面的伪选择器 div。

Answer 1

*{
      margin:0px;
      padding:0px;
      box-sizing: border-box;
     }
     body{
       height:100vh;
       display:flex;
       justify-content:center;
       align-items:center;
       flex-direction: column;
     }
     .container{
       position:relative; 
      }
     .container span{
       background:black;
       height:300px;
       display:block;
       width:10px;
       position: absolute;
       left:47%;
       top:20px;
     }
     .box1,
     .box2,
     .box3{
       background:greenyellow;
       width:100px;
       height:100px;
       border:1px solid blue;
       margin:10px 0px;
       position: relative;
     }

<body>
    <div class="container">
      <span></span>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>

Answer 2

尝试将父 div 位置设置为 relative 然后将 before 伪元素的 z-index 设置为 -1

.parent-div {
  position: relative;
}

.parent-div::after {
  content: "";
  position: absolute;
  z-index: -1;
}

在 3 个 div 后面放置一个 Div

Placing a Div behind 3 divs

html

javascript

css

sass