如何将div放置在其他div上

发布于 2024-09-26 11:13:29 字数 577 浏览 6 评论 0原文

我想将一个 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 之前出现空白。

原文

I want to position one div over another 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>

The problem is that when I place the black_strip1 class on the inner div, it appears in the right place but a blank space is appearing before the next div.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不…忘初心 2024-10-03 11:13:29

给定包含 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;
}

give the containing div position:relative; and the child div position:absolute;

the child div will now be positioned with respect to the parent div. (starting from the top left of the parent div)

eg.

.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;
}

回复收藏 0 原文