Question

i have always wondered how to limit the area a element with position absolute covers.

Ex: i have a container div, lets say its 100 x 100

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

i want the anchor to overlap all content in the container div.
i style the anchor with

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

but it seems to overlap the whole site, which is unwanted 🙂
how do i do this ?

Answer 1

Here is one possibility (of many):

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;
}

Example: http://jsfiddle.net/93VPp/

Additional example, based on code provided by the original poster: http://jsfiddle.net/aqyFP/3/