html - 我想像下面给出的图像一样重叠两个 div

Question

这只是我使用 html 和 css 编写的粗略代码。 如何重叠白色div顶部的绿色div？ 我尝试将绿色 div 向上移动，但是当我给 margin-bottom 更多 px 时，它并没有向上移动

#d3{
	background-color: white;
	border:0px solid transparent;
	width:500px;
	height:200px;
	
	
	box-shadow: 0px 2px 2px #888888;
        -o-box-shadow: 0px 2px 2px #888888;
        -webkit-box-shadow: 0px 2px 2px #888888;
        -moz-box-shadow: 0px 2px 2px #888888;
	
}

#d4{
	background-color: green;
	border:0px solid transparent;
	width:450px;
	height:50px;
	z-index:1;
	margin-left: 20px;
	margin-bottom: 100px;
	margin-top: 20px;
	box-shadow: 0px 2px 2px #888888;
        -o-box-shadow: 0px 2px 2px #888888;
        -webkit-box-shadow: 0px 2px 2px #888888;
        -moz-box-shadow: 0px 2px 2px #888888;
	white-space: nowrap;
}

<p id="i3">Tabs with icons</p><br><br><br>
   		 <div id="d3">
   		 		<br><br>
   		 		<p>Lorem ipsum dolor sit amet, mattis nunc ligula nullam, sagittis dapibus magna feugiat, sit vel rutrum eros lacus vestibulum. Diam mauris venenatis ultricies, a donec fames placerat eget lacus dis, ut vestibulum, malesuada odio sem elementum erat nunc et, risus metus tortor vel in. Vestibulum in, nunc eu sed congue tincidunt dui, vulputate lectus nam ipsum. Justo donec, phasellus vitae tellus, felis duis massa fermentum, eu sem enim. Magna justo, est lectus non laoreet venenatis porta sed, pulvinar sit nulla enim, mauris duis nulla laoreet velit. </p>
   		 </div>
   		 <div id="d4">
   		 			Lorem ipsum dolor sit amet
   		 		</div>

/image/ruFfw.png

Answer 1

我建议您包装您的 div 并将它们在标记中的顺序切换为它们在页面上的布局方式。

相对定位的包装器将与您的其余内容一起流动，并且可以使用绝对定位正确定位“绿色”div。

2:nd div 上的填充会将其内容推到位。

请注意，也可以使用负边距来定位“绿色”div，但是否以及如何取决于您打算如何使用它。

body {
  background: #eee;
}
.wrap {
  position: relative;
}
#d3 {
  position: absolute;
  left: 25px;
  top: -25px;
  width: 450px;
  height: 50px;
  background-color: green;
  z-index: 1;
  box-shadow: 0px 2px 2px #888888;
  -o-box-shadow: 0px 2px 2px #888888;
  -webkit-box-shadow: 0px 2px 2px #888888;
  -moz-box-shadow: 0px 2px 2px #888888;
  white-space: nowrap;
}
#d4 {
  background-color: white;
  width: 500px;
  padding: 35px 10px 15px;
  box-sizing: border-box;
  box-shadow: 0px 2px 2px #888888;
  -o-box-shadow: 0px 2px 2px #888888;
  -webkit-box-shadow: 0px 2px 2px #888888;
  -moz-box-shadow: 0px 2px 2px #888888;
}

<p id="i3">Tabs with icons</p>
<br>
<br>
<div class="wrap">
  <div id="d3">
    Lorem ipsum dolor sit amet
  </div>
  <div id="d4">
    <p>Lorem ipsum dolor sit amet, mattis nunc ligula nullam, sagittis dapibus magna feugiat, sit vel rutrum eros lacus vestibulum. Diam mauris venenatis ultricies, a donec fames placerat eget lacus dis, ut vestibulum, malesuada odio sem elementum erat nunc
      et, risus metus tortor vel in. Vestibulum in, nunc eu sed congue tincidunt dui, vulputate lectus nam ipsum. Justo donec, phasellus vitae tellus, felis duis massa fermentum, eu sem enim. Magna justo, est lectus non laoreet venenatis porta sed, pulvinar
      sit nulla enim, mauris duis nulla laoreet velit.</p>
  </div>
</div>