CSS位置 - 部分重叠div

我有基本的CSS布局isssue。 DIV2上升150px，部分重叠DIV1。将DIV3放在DIV2下方时遇到问题。我可以使用与DIV2中相同的CSS来应用DIV3，但那不是我正在寻找的，因为它们还有很多其他的div，而且我似乎也必须对其他所有的div都这样做。必须有一些东西来重置职位。我希望我清楚地解释自己。 DIV2的高度也必须灵活（移动）。CSS位置 - 部分重叠div

视觉图：

CSS DIV2：

position: relative; 
top: -150px;

HTML：

<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div>

来源

2016-09-28 Nita

不应该你的第二个'div2'类是真正'div3'？你已经在共享的HTML代码中声明了'div2'类。 –

使用margin-top，而不是在CSS top财产。其余的div将在div2之后自动执行。

如果仍然无效，请分享您代码的工作小提琴。

div { 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
.div1 { 
 
    background: red; 
 
} 
 
.div3 { 
 
    background: green; 
 
} 
 
.div2 { 
 
    margin: 0 auto; 
 
    margin-top: -50px; 
 
    background: yellow; 
 
    width: 150px; 
 
} 
 
.parent { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
}

<div class="parent"> 
 
    <div class="div1"></div> 
 
    <div class="div2"></div> 
 
    <div class="div3"></div> 
 
    <div class="div1"></div> 
 
    <div class="div3"></div> 
 
</div>

来源

2016-09-28 06:10:14

使用margin-top而不是top可以实现。谢谢。 – Nita

添加到您的div2，虽然它不是最好的做法：

margin-bottom: -150px

.div1, 
 
.div2, 
 
.div3 { 
 
    height: 150px; 
 
} 
 

 
.div1 { 
 
    background: red; 
 
} 
 

 
.div2 { 
 
    background: blue; 
 
    position: relative; 
 
    top: -75px; 
 
    margin-bottom: -75px; 
 
} 
 

 
.div3 { 
 
    background: green; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div> 
 
<div class="div3"></div>

来源

2016-09-28 05:49:13 Christoph

不起作用，我试过已经 – Nita

什么将是最佳做法？ – Nita

我已经向我的答案添加了一个示例，显示负边距工作正常。 – Christoph

CSS位置 - 部分重叠div

回答

相关问题