我想重叠两个div，如下图所示

时间：2016-10-12 17:42:29

标签： html css

这只是我用html和css做的粗略代码。 如何重叠白色div顶部的绿色div？ 我尝试移动绿色div，但是当我向margin-bottom提供更多px时，它不会向上移动

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

https://i.stack.imgur.com/ruFfw.png

4 个答案:

答案 0 :(得分：1)

我建议你打包div并将标记中的顺序切换到页面上的排列方式。

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

2：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>

答案 1 :(得分：0)

Here's一个显示您所追求的内容的例子。

要将您自己的示例更改为有效，只需将margin-top上的#d4更改为-225px（其高度的一半）。

margin-top: -225px;

答案 2 :(得分：-1)

您需要使用：

position: absolute;
top: 100px;

在＃d4元素上。根据需要调整顶部以定位在d4元素的顶部。

我已在下面更新了您的代码，here是一个很好的参考，可以说明这样的定位方式

#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{
    position: absolute;
    top: 100px;
	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>

答案 3 :(得分：-1)

解决方案：

您需要将position:relative添加到#d3并将这些行添加到#d4：

position:absolute;
  bottom:70px;
  left:6px;

这里有一个工作片段：

#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;
  position:relative;
	
}

#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;
  position:absolute;
  bottom:70px;
  left:6px;
  
}
<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 id="d4">
   		 			Lorem ipsum dolor sit amet
   		 </div>
   		 
   		 		</div>

相关问题
最新问题