绝对位置，限制其大小

我一直想知道如何限制带有绝对位置的元素。绝对位置，限制其大小

例如：我有一个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'，那么这不是真的。 –

是的，这是正确的。 –

绝对位置，限制其大小

回答

相关问题