Does the padding of a relatively positioned element overlap on (0,0) an absolutely positioned child?
This is a CSS issue that doesn't make sense to me.
Right now I have something like this:
.container {
height: 500px;
width: 500px;
position: relative;
padding: 10px;
}
.child {
top:0px;
left:0px;
position:absolute;
width: 100px;
height: 100px;
}
The child is ignoring the parent's addition right now. This seems intriguing to me. Am I missing a quick fix (I can't add padding / margins for the child)? Have I messed up DOCTYPE?
Thank! Matt Mueller
source to share
Since you have specified an absolute position for the child, this behavior is correct. The child will be positioned absolutely with the left and top values.
In the absolute positioning model, the box is explicitly offset with respect to its containing block. Removed from normal flow completely (it has no effect on later siblings). an absolutely positioned box sets up a new containing block for the normal flow of children and absolutely (but not fixed) positioned children. However, the content of an absolutely positioned element does not wrap around any other boxes. They may contain the contents of another box (or shade themselves), depending on the stack levels of the overlapping boxes.
source to share