Css Position Relative Without Relative Width?

I'd like an element to have relative positioning. But I don't want its child element (with position:absolute) to have relative width to the parent. For example: http://jsfiddle.net

Solution 1:

Try adding width:inherit to the .abs class.

Solution 2:

How about this jsFiddle.

But you should really rethink your strategy. In your fiddle, your second example only works because the parent div is not positioned and therefore, the .abs div is technically not in the parent.

Normally, child elements are inside their parents. That's what containers are for! So if you don't want the .abs div to be constrained by the red rectangle, don't put it inside the red rectangle.

Solution 3:

I was able to achieve a similar-looking effect as follows:

<divclass='abs pad'>
    Content content content
</div><divclass='rel pad red'></div>

.rel {
    position: relative;
}
.abs {
    position: absolute;
    z-index: 1;
}
.pad {
    padding: 2px;
    margin: 2px;
}
.red {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: red;
}