我需要协助覆盖一个单独的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顶部。
当前回答
下面是一个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>
其他回答
#{容器 宽度: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的子元素。
下面是一个简单的例子，用一个加载图标覆盖另一个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
我不是一个程序员，也不是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前面。注意，此属性仅适用于定位的元素。
这是你需要的:
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>
