如何覆盖一个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顶部。

当前回答

新的Grid CSS规范提供了一个更加优雅的解决方案。使用position: absolute可能会导致重叠或缩放问题，而Grid将使您远离肮脏的CSS黑客。

最小网格叠加的例子:

HTML

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed after content in the HTML</div>
</div>

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

就是这样。如果您不是为Internet Explorer构建的，那么您的代码很可能可以工作。

2019-04-02 13:17:03

其他回答

这是你需要的:

2013-01-30 07:45:54

下面是一个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

#{容器宽度: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> <------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