如何將一個div覆蓋在另外一個div上

時間 2019-12-18

標籤如何一個 div 覆蓋另外欄目 CSS 简体版

原文原文鏈接

我須要一個我的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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。