html - 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 内。

它必须是两个独立的div,但我需要知道如何将 div#infoi 放置在 div.navi 上,并在 div.navi的顶部居中和居中。

希望能帮助你实现这个目标。

时间:

HTML


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

CSS


#container {
 width: 100px;
 height: 100px;
 position: relative;
}

#navi, 
#infoi {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

#infoi {
 z-index: 10;
}

我建议学习关于 position: relativeposition: absolute 元素的。

在任何其他与样式 z-index:1;position: absolute; 可以叠加你通过使用 div

z-index 确定 div'堆栈'的顺序。 具有较高 z-index的div将出现在一个具有较低 z-index的div前面。 请注意,这里属性只对定位的元素有效。

这就是你需要的。


<html>
 <head>
 <META HTTP-EQUIV="EXPIRES" CONTENT="-1"/>
 <script type="text/javascript">
 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';
 }
 </script>
 <style type="text/css">

 #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>
 </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>

我不是一个程序员,也不是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;
 }

html是:


<div id="wrapper">
 <div id="header">
 <div id="menu">
 menu will go here 
 </div>
 </div>
</div>

当然,它们两边都会有一个包装器。 你可以控制菜单div的位置,它将显示在左侧的页边距和顶部位置。 如果你喜欢,也可以将div菜单设置为浮动。 希望这有帮助

希望下面的CSS代码能帮助你。

CSS代码


.trPic{
 width:320px;
 height:240px;
 background: url(img/flower.png) no-repeat;
 border:5px solid #000000;
}
.trPic. redO{
 position:relative;
 top:0px;
 width:320px;
 height:240px;
 background:#FF2400;
 opacity:0;
}
.trPic:hover. redO
{
 opacity:0.7;
}

HTML


<div class="trPic">
 <div class="redO">
 </div>
</div>

关于覆盖的更多信息。。 CSS重叠技术

...