如何将一个div覆盖在另一个div上

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我需要一个个人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顶部。

#1楼

通过使用样式为z-index:1;的div z-index:1; 和position: absolute; 您可以将div覆盖在其他任何div 。

z-index确定div“堆栈”的顺序。 z-index较高的div将出现在z-index较低的div的前面。请注意，此属性仅适用于定位的元素 。

#2楼

这是您需要的：

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>

#3楼

#container { width: 100px; height: 100px; position: relative; } #navi, #infoi { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #infoi { z-index: 10; }

<div id="container"> <div id="navi">a</div> <div id="infoi"> <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b </div> </div>

我建议学习关于position: relative和child元素，以及position: absolute 。

#4楼

我既不是CSS的编码员也不是专家，但是我在Web设计中仍在使用您的想法。我也尝试过不同的解决方案：

#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中。您也可以根据需要将div菜单设置为浮动。

#5楼

以下是基于CSS的简单解决方案100％。 “秘密”是在包装元素中使用display: inline-block 。图片vertical-align: bottom的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>

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3143663

标签

background

position

div

absolute