一个块应该与两个相邻的CSS重叠 [英] One block should overlap the two adjacent CSS

问题描述

我需要div2重叠/覆盖它的两个相邻区块。我可以用div1来完成，但我不能用div3来完成。有人知道如何做到这一点？请参阅下面的代码，了解我遇到的问题。谢谢！

HTML：

 < div class =parent> ; 
< div class =child_1>一些div1< / div> 
< div class =child_2>一些div2< / div> 
< div class =child_3>一些div3< / div> 
< / div> 
  

CSS：

  .parent {
 position：relative; 
 font-size：34px; 
 border：1px solid＃000; 
背景：#eef; 
 height：110px; 
 width：620px; 
保证金：20px 
} 
 
 .child_1 {
 position：static; 
 text-align：center; 
 display：inline-block; 
 margin-top：20px; 
 margin-left：10px; 
 height：50px; 
 width：200px; 
 border：3px纯黄色; 
背景：黄色; 
} 
 
 .child_2 {
 position：relative; 
 text-align：center; 
 display：inline-block; 
 margin-left：-30px; 
 height：80px; 
 width：200px; 
 border：3px纯蓝色; 
背景：;剩余
：-30px; 
 top：-10px; 
} 
 
 .child_3 {
 position：relative; 
 display：inline-block; 
 text-align：center; 
 height：50px; 
 width：200px; 
 border：3px纯黄色; 
背景：黄色;剩余
：-30px; 
 
  

解决方案

.child_3 需要有 left：-60px; 才能重叠 .child_2

您必须从 .child_2 添加-30px到 child_3 ，所以-30px -30px = -60px

附加：要真正将child_2提供给COVER child_3，请指定 z-index：1 至 child_2 ：

  .parent {position：relative; font-size：34px; border：1px solid＃000;背景：#eef; height：110px; width：620px; margin：20px;}。child_1 {position：static;文本对齐：中心;显示：inline-block;边距：20像素;保证金左：10px的; height：50px;宽度：200px;边框：3px纯黄色;背景：黄色;}。child_2 {position：relative;文本对齐：中心;显示：inline-block;保证金左：-30px; height：80px;宽度：200px;边框：3px纯蓝色;背景：;左：-30px;顶部：-10px; z-index：1;}。child_3 {position：relative;显示：inline-block;文本对齐：中心; height：50px;宽度：200px;边框：3px纯黄色;背景：黄色; left：-60px;}  

< div class =父> < div class =child_1>一些div1< / div> < div class =child_2>一些div2< / div> < div class =child_3>一些div3< / div>< / div>

b

I need "div2" to overlap/cover its two adjacent block. I can do it with "div1", but I cannot do it with "div3". Someone know how to do it? Please see my code below with what I have a problem. Thanks!

HTML:

<div class="parent">
  <div class="child_1">Some div1</div>
  <div class="child_2">Some div2</div>
  <div class="child_3">Some div3</div>
</div>

CSS:

.parent {
  position: relative;
  font-size: 34px;
  border: 1px solid #000;
  background: #eef;
  height: 110px;
  width: 620px;
  margin: 20px
}

.child_1 {
  position: static;
  text-align:center;
  display: inline-block;
  margin-top:20px;
  margin-left:10px;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
}

.child_2 {
  position: relative;
  text-align:center;
  display: inline-block;
  margin-left:-30px;
  height: 80px;
  width: 200px;
  border: 3px solid blue;
  background:;
  left:-30px;
  top:-10px;
}

.child_3 {
  position: relative;
  display: inline-block;
  text-align:center;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
  left:-30px;
}

解决方案

.child_3 needs to have left:-60px; in order to overlap .child_2

you have to add the -30px from .child_2to child_3, so -30px -30px = -60px

ADDITION: To really get child_2 to COVER child_3, assing z-index:1 to child_2:

.parent {
  position: relative;
  font-size: 34px;
  border: 1px solid #000;
  background: #eef;
  height: 110px;
  width: 620px;
  margin: 20px;
}

.child_1 {
  position: static;
  text-align:center;
  display: inline-block;
  margin-top:20px;
  margin-left:10px;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
}

.child_2 {
  position: relative;
  text-align:center;
  display: inline-block;
  margin-left:-30px;
  height: 80px;
  width: 200px;
  border: 3px solid blue;
  background:;
  left:-30px;
  top:-10px;
  z-index:1;
}

.child_3 {
  position: relative;
  display: inline-block;
  text-align:center;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
  left:-60px;
}

<div class="parent">
  <div class="child_1">Some div1</div>
  <div class="child_2">Some div2</div>
  <div class="child_3">Some div3</div>
</div>

这篇关于一个块应该与两个相邻的CSS重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！