Question

我只是试图使用margin负值使两个div重叠...这很好用

Stack Snippet

＆＃13;

.main {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: -20px;
}

.item:last-child {
  background: blue;
  margin-top: 20px;
}

＆＃13;

<div class="main">
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

现在我刚刚将opacity:0.5添加到第一项...... 发生了一些奇怪的 。我注意到应用opacity小于1的值，如0.99将div放在前面......

更新： @Temani_Afif在应用transform的评论中提到了在第一个div中产生相同的效果

Stack Snippet

＆＃13;

.main {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: -20px;
}

.item:last-child {
  background: blue;
  margin-top: 20px;
}

.item:first-child {
  transform: scale(1);
  opacity: .99;
}

＆＃13;

<div class="main">
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

我知道我可以使用position和z-index值将div放在前面或后面......

但我不明白为什么将opacity值小于1或或transform应用于第一个div将其放在前面......这是正常行为吗？

不透明度或变换改变元素

0 个答案: