Question

我一直想知道如何限制区域绝对覆盖的元素。

Ex：我有一个容器div，比方说100 x 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%;

但它似乎与整个网站重叠，这是不需要的:) 我该怎么做？

Answer 1

这是一种可能性（很多）：

<强> 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/

其他示例，基于原始海报提供的代码：http://jsfiddle.net/aqyFP/3/

Answer 2

您可以为锚点的父元素指定一个“relative”的位置：

.container { position:relative }

Answer 3

100％表示100％的容器。当某些东西绝对定位时，它会从文档流中取出，唯一的容器是<body>。因此它将扩展为<body>。

您需要以像素为单位定义尺寸，而不是百分比。

绝对位置，限制其大小

3 个答案: