絕對位置，限制其大小

我一直想知道如何限制帶有絕對位置的元素。絕對位置，限制其大小

例如：我有一個div容器，可以說，它的100×100

<div class="container"> 
<a href="#" class="overlap"></a> 
<div class="content">some content...</div> 
</div>

我想錨重疊的div容器的所有內容。我風格

z-index:10; 
position:absolute; 
width:100%; 
height:100%;

錨，但它似乎重疊整個網站，這是不必要的:) 我如何做到這一點？

來源

2011-11-07 Flaashing

你的代碼有點壞了;）你正在關閉容器，裏面有一個打開的錨點標籤。 – Bankzilla

這裏是一種可能性（許多）：

HTML

<div class="container"> 
<a href="#" class="overlap"></a> 
<div class="content">some content...</div> 
</div>

CSS

.container { 
    width: 100px; 
    height: 100px; 
    background-color: #eee; 
    position: relative; 
} 

.overlap { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

實施例：http://jsfiddle.net/93VPp/

附加的E xample，根據原始海報提供的代碼：http://jsfiddle.net/aqyFP/3/

來源

2011-11-07 21:47:01

你打賭我:(我做了一個小提琴。Ps你不必指定左/頂等屬性http://jsfiddle.net/D2kbA/ – Bankzilla

@Bankzilla我指定他們作爲替代到100％的高度/寬度，儘管你肯定可以用各種方式做事情。 –

那是我認爲我自己的代碼，但它不工作... http://jsfiddle.net/aqyFP/1/ – Flaashing

，您可以給錨的父元素的「相對」的位置：

.container { position:relative }

來源

2011-11-07 21:45:31 sdleihssirhc

由於一些奇怪的原因，它不工作，它只是禁用所有的CSS代碼 – Flaashing

@Flaashing你可以發佈更多的代碼，然後？也許是[jsFiddle]（http://jsfiddle.net），我們可以解決這個問題？ – sdleihssirhc

http://jsfiddle.net/aqyFP/1/ – Flaashing

100％，意味着其容器的100％。當某物被絕對定位時，它被從文件流中取出，唯一的容器是<body>。所以它會擴大到<body>的大小。

您需要以像素爲單位定義尺寸，而不是百分比。

來源

2011-11-07 21:46:22

如果包含的元素是'position：relative'，那麼這不是真的。 –

是的，這是正確的。 –

絕對位置，限制其大小

回答

相關問題