Question

我想将一个div放在另一个div上。

CSS：

.fresh_bnr_img {
  float:left;
  width:950px;
  text-align:center;
}

.black_strip1 {
  position:relative;
  top:20px;
  width:120px;
  height:50px;
  background:#000;
  opacity:0.5;
  z-index:999;
}

HTML：

<div class="fresh_bnr_img">
  <div class="black_strip1">Home</div>
  <img src="images/banner-2.jpg" width="946" height="295" alt="fresh-banner" />
</div>

问题在于，当我将black_strip1类放在内部div上时，它出现在正确的位置，但是在下一个div之前出现了一个空格。

Answer 1

包含div position:relative;和子div position:absolute;

现在，子div将相对于父div进行定位。（从父div的左上角开始）

例如

.fresh_bnr_img{
 position:relative;
 float:left;
 width:950px;
 text-align:center;
}


.black_strip1{
 position:absolute;
 top:20px; /* 20px from the top edge of .fresh_bnr_img*/
 left:0px; /* 0px from the left edge of .fresh_bnr_img*/
 width:120px;
 height:50px;
 background:#000;
 opacity:0.5;
 z-index:999;
}

Answer 2

我希望它能帮到你

http://www.templatespoint.com/blog/2010/10/how-to-do-div-on-div/

如何将div放在另一个div上

2 个答案: