Question

请查看图片以了解我在说什么。我有三个盒子元素，看起来像图片中显示的那样。我想要的是绿色框只显示重叠黄色和不显示重叠红色。绿色框需要重叠，但仅在黄色区域可见。我尝试过以我能想到的各种不同方式使用z-index，position和opacity，但还是想出一个解决方案。

link to image

<div id="one" ></div>
<div id="two" >
</div><div id="three" ></div>


#one{
    border: solid 1px black;
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
}
#two{
    margin-left: 50px;
    border: solid 1px black;
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
}
#three{
    border: solid 1px black;
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
}

Answer 1

不可能让元素重叠一层，然后像你要问的那样在另一层下面。我知道这有一个艺术术语。

无论如何，这里最接近的解决方案是假装它并在黄色框内有绿框：

.outer {
  width: 300px;
  height: 300px;
  position: relative;
  outline: 1px solid black;
}

.green {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: -50px;
  outline: 1px solid black;
  background-color: green;
  z-index: 3;
}

.yellow {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  outline: 1px solid black;
  background-color: yellow;
  z-index: 2;
  overflow: hidden;
}

.red {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  outline: 1px solid black;
  background-color: red;
  z-index: 1;
}

<div class="outer">
  <div class="yellow">
    <div class="green"></div>       
  </div>
  <div class="red"></div>
</div>

重叠的盒子元素

1 个答案: