覆蓋另一個div，但不知道div的大小

我試圖將一個div放在另一個div上。如果您知道div的尺寸，這非常簡單。覆蓋另一個div，但不知道div的大小

這裏解決： How to overlay one div over another div

所以，這裏是我的HTML：

<div class="container"> 
    <div class="overlay"></div> 
    <div class="content"></div> 
</div>

在我的情況，我不知道「內容」或「容器」 div的確切尺寸。這是因爲我無法控制div中的任何內容（我們正在使我們的應用程序可擴展到第三方開發人員）。

See my example on jsFiddle 覆蓋層應完全覆蓋內容。寬度100％和高度100％。然而，這不起作用，因爲在我的例子中，我絕對定位了覆蓋。

一個解決方案是使用JavaScript獲取內容div的大小，然後設置疊加層的大小。我不太喜歡這個解決方案，因爲如果圖像大小沒有指定，你需要等到圖像加載並重新計算div的大小。

有什麼辦法可以解決CSS中的這個問題嗎？

來源

2012-07-09 andyuk

你可以添加更多的細節和[小提琴]（http://jsfiddle.net）？ – 2012-07-09 12:05:51

另外，爲什麼不使用'width：100％;身高：100％'overlay'？ – 2012-07-09 12:18:39

添加鏈接到JS小提琴。我無法使用100％的寬度和高度，因爲疊加層是絕對定位的，所以它會填充以覆蓋頁面。 – andyuk 2012-07-09 12:24:23

這是不可能做到這一點，因爲：

疊加不包含任何限制它的大小（因爲應用於容器沒有高度/寬度）。
內容div的大小可以隨着內容加載而改變（因爲它沒有固定的寬度/高度）。

我使用JavaScript *解決了這個問題。例如。

function resizeOverlay() { 
    $('.overlay').css({ 
    width: $('.content').width() 
    height: $('.content').height() 
    }); 
} 
$('.content').find('img').on('load', resizeOverlay);

*代碼未經測試。

來源

2012-07-12 22:12:44 andyuk

看到這個演示：http://jsfiddle.net/rathoreahsan/kEsbx/

你們是不是上面演示提到在做什麼？

CSS：

#container { 
    position: relative; 
} 

.overlay, 
.content{ 
    display:block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.overlay{ 
    z-index: 10; 
    background: #ccc; 
}

來源

2012-07-09 12:06:48

覆蓋圖可以工作，但我希望覆蓋圖覆蓋內容100％的寬度和高度。看到我分叉的JS小提琴：http://jsfiddle.net/andyuk/YWfTM/10/ – andyuk 2012-07-09 12:26:22

@andyuk：你認爲，如果我們使用Jquery/Javascript定義寬度僅用於'overlay' div，如下所示： http://jsfiddle.net/rathoreahsan/YWfTM/18/ – 2012-07-09 12:38:52

JavaScript是一種解決方案，但正如我所提到的，處理內容中的圖像（沒有寬度和高度）比較棘手。看起來我正在用盡使用CSS的選項。 – andyuk 2012-07-09 12:42:35

您可以設置位置爲絕對，然後將所有4個位置值，以0px這將使箱擴大。在這裏看到一個演示：http://jsfiddle.net/6g6dy/

這樣你不必擔心重新計算的東西，如果你想在覆蓋或容器填充（像你，如果你使用的實際height和width值），因爲它總是會調整到箱子的外部尺寸。

來源

2012-07-09 12:08:48 prodigitalson

這很不錯，但當您在內容上設置寬度時，它不起作用。看到我的叉子：http://jsfiddle.net/andyuk/WT4Lm/3/ – andyuk 2012-07-09 12:40:28

那麼你不能這樣做，而不使用js。無論如何，您需要將維度/定位形式作爲父元素。您可能需要在'.content'內移動覆蓋層，或者需要在'.container'上設置尺寸。如果你不想使用JS多數民衆贊成在你使用positiong，寬度，或邊緣瘋狂得到ot到正確的位置你必須做的。 – prodigitalson 2012-07-09 12:48:06

嘿，你看起來像這樣：http://tinkerbin.com/Vc4RkGgQ

CSS

.container { 
position:relative; 
background:blue; 
    color:white; 
} 

.content { 
position:absolute; 
top:0; 
left:15px; 
background:red; 
color:yellow; 
}

來源

2012-07-09 12:11:05

你有硬編碼左15px。我不知道內容的大小。看看我的JS小提琴的例子。 – andyuk 2012-07-09 14:01:43

我不知道你究竟想要做但是這可能工作：

container必須relative ：靜態任何東西

overlay和content是absolute：在第一個非靜態父項中移動頂部/左側;無流量。
給予相同的top/left頂部和更高的z-index上部元素。

來源

2012-07-09 12:11:52 CoR

主要問題是調整覆蓋div以覆蓋內容div的100％。看我的例子：http://jsfiddle.net/andyuk/YWfTM/10/ – andyuk 2012-07-09 12:35:09

你確實可以在沒有JavaScript的情況下做到這一點。你的問題是，#container元素相對於整個頁面具有100％的寬度。爲了解決這個問題，您可以：

一）位置時，它絕對，

#container { 
    position: absolute; 
}

B），使其漂浮或

#container { 
    float: left; 
}

C）使其顯示爲表格單元格

#container { 
    display: table-cell; 
}

上面的其中一個就足夠了，你不需要全部應用。此外，您不應將.content絕對定位，因爲這會阻止#container具有相同的寬度/高度。

來源

2014-05-30 09:12:01

如果您在設置高度後擔心圖像加載，則可以繼續並在包含div中設置圖像的尺寸並使用padding-bottom hack。這種方式當瀏覽器在頁面上繪畫時，它知道在加載之前圖像有多大。

來源

2016-08-05 17:16:32

覆蓋另一個div，但不知道div的大小

回答

相關問題