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

时间 2019-12-18 标签如何将一个 div 覆盖另外一个 div

我须要一个我的div覆盖另外一个我的div 。 css

个人代码以下所示： html

<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顶部。 app

#1楼

经过使用样式为z-index:1;的div z-index:1; 和position: absolute; 您能够将div覆盖在其余任何div 。 ide

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 。 url

#4楼

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

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