我需要协助覆盖一个单独的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顶部。
当前回答
这是你需要的:
function showFrontLayer() { document.getElementById('bg_mask').style.visibility='visible'; document.getElementById('frontlayer').style.visibility='visible'; } function hideFrontLayer() { document.getElementById('bg_mask').style.visibility='hidden'; document.getElementById('frontlayer').style.visibility='hidden'; } #bg_mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; margin-top: 0px; width: 981px; height: 610px; background : url("img_dot_white.jpg") center; z-index: 0; visibility: hidden; } #frontlayer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 70px 140px 175px 140px; padding : 30px; width: 700px; height: 400px; background-color: orange; visibility: hidden; border: 1px solid black; z-index: 1; } </style> <html> <head> <META HTTP-EQUIV="EXPIRES" CONTENT="-1" /> </head> <body> <form action="test.html"> <div id="baselayer"> <input type="text" value="testing text"/> <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/> Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text <div id="bg_mask"> <div id="frontlayer"><br/><br/> Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/> Use position: absolute to get the one div on top of another div.<br/><br/><br/> The bg_mask div is between baselayer and front layer.<br/><br/><br/> In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/> <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/> </div> </div> </div> </form> </body> </html>
其他回答
下面是一个简单的例子，用一个加载图标覆盖另一个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前面。注意，此属性仅适用于定位的元素。
