如何覆盖一个div在另一个div

我需要协助覆盖一个单独的div在另一个单独的div。

我的代码是这样的:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

不幸的是，我不能嵌套div#infoi或img，在第一个div.navi。

它必须是两个分开的divs，如所示，但我需要知道我如何可以把div#infoi在div.navi和最右边，并集中在div.navi顶部。

当前回答

你需要添加一个相对位置的父级，在这个父级中你可以设置div的绝对位置

<div> <------Relative
  <div/> <------Absolute
  <div/> <------Absolute
  <div/> <------Absolute
<div/>

最终结果:

https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100

<div class="container">
  <div class="header">TOP: I am at Top & above of body container</div>
  
    <div class="center">CENTER: I am at Top & in Center of body container</div>
  
  <div class="footer">BOTTOM: I am at Bottom & above of body container</div>
</div>

设置HTML正文全宽

 html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

之后，您可以设置一个div的相对位置，以采取全宽和高

.container {
  position: relative;
  background-color: blue;
  height: 100%;
  width: 100%;
  border:1px solid;
  color: white;
  background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: #cccccc;
}

在这个相对位置的div中，你可以把你的div放在绝对位置

在容器上方

.header {
  position: absolute;
  margin-top: -10px;
  background-color: #d81b60 ;
  left:0;
  right:0;
  margin:15px;
  padding:10px;
  font-size: large;
}

在容器上方的底部

.footer {
  position: absolute;
  background-color: #00bfa5;
  left:0;
  right:0;
  bottom:0;
  margin:15px;
  padding:10px;
  color: white;
  font-size: large;

}

在容器上方的中心

.center {
  position: absolute;
  background-color: #00bfa5;
  left:  30%;
  right: 30%;
  bottom:30%;
  top: 30%;
  margin:10px;
  padding:10px;
  color: white;
  font-size: large;
}

2020-11-03 21:08:47

其他回答

通过使用样式为z-index:1的div;和位置:绝对的;你可以覆盖你的div在任何其他div。

Z-index决定了div“堆栈”的顺序。z指数高的div会出现在z指数低的div前面。注意，此属性仅适用于定位的元素。

2012-05-23 13:46:10

我不是一个程序员，也不是CSS专家，但我仍然在我的网页设计中使用您的想法。我也尝试过不同的决心:

#wrapper { margin: 0 auto; width: 901px; height: 100%; background-color: #f7f7f7; background-image: url(images/wrapperback.gif); color: #000; } #header { float: left; width: 100.00%; height: 122px; background-color: #00314e; background-image: url(images/header.jpg); color: #fff; } #menu { float: left; padding-top: 20px; margin-left: 495px; width: 390px; color: #f1f1f1; } <div id="wrapper"> <div id="header"> <div id="menu"> menu will go here </div> </div> </div>

当然，它们都会被包装起来。您可以控制菜单div的位置，它将显示在头部div的左侧空白和顶部位置。如果你喜欢，也可以将div菜单设置为右浮动。

2010-08-28 23:46:40

下面是一个100%基于CSS的简单解决方案。“秘密”是在包装器元素中使用display: inline块。图片中的vertical-align: bottom是为了克服一些浏览器在元素后添加的4px填充。

建议:如果包装器之前的元素是内联的，那么它们最终可能是嵌套的。在这种情况下，您可以使用display: block将包装器“包装”到容器中——通常是一个好的旧div。

.wrapper { display: inline-block; position: relative; } .hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 188, 212, 0); transition: background-color 0.5s; } .hover:hover { background-color: rgba(0, 188, 212, 0.8); // You can tweak with other background properties too (ie: background-image)... } img { vertical-align: bottom; } <div class="wrapper"> <div class="hover"></div> <img src="http://placehold.it/450x250" /> </div>

2017-01-09 20:52:43

这是你需要的:

2013-01-30 07:45:54

#{容器宽度:100 px; 身高:100 px; 位置:相对; ｝ #纳, # infoi { 宽度:100%; 高度:100%; 位置:绝对的; 上图:0; 左:0; ｝ # infoi { z - index: 10; ｝ < div id = "容器" > < div id = "纳" > < / div > < div id = " infoi " > <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" /> < / div > < / div >

我建议学习position: relative和position: absolute的子元素。

2010-05-31 03:20:15

如何覆盖一个div在另一个div

推荐文章

最新文章

标签