我需要协助覆盖一个单独的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。
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div */
height:500px; /* Remove this if you have content inside */
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>
试试这里:http://jsbin.com/fotozolucu/edit?html,css,output
其他回答
#{容器 宽度: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的子元素。
新的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构建的，那么您的代码很可能可以工作。
我不是一个程序员，也不是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菜单设置为右浮动。
通过使用样式为z-index:1的div;和位置:绝对的;你可以覆盖你的div在任何其他div。
Z-index决定了div“堆栈”的顺序。z指数高的div会出现在z指数低的div前面。注意，此属性仅适用于定位的元素。
下面是一个简单的例子，用一个加载图标覆盖另一个div。
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div */
height:500px; /* Remove this if you have content inside */
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>
试试这里:http://jsbin.com/fotozolucu/edit?html,css,output
