I'm having problems to make the div parent inherit the height of the div child.
.parent {
position: relative;
}
.child {
position: absolute;
width: 960px;
}
The text should be in the black gap.
Any help?
Do you need the child to be positioned absolutely for some reason?
This is why it doesn't 'fit' in your parent element.
According to the documentation
Position absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
View the illustrations at https://developer.mozilla.org/en-US/docs/Web/CSS/position to see what exactly happens.
Remove any size attributes of the parent, it will then become as big as it needs to be for its contents.
Why have you declared position:absolute? If you want to move .child you should use position:relative or margins.
Absolute positioning removes the element from the natural flow of the document.
Related
So I want to offset an element 5 pixels up. I set position: absolute and top: -5px. Now the element is positioned relative to the page, not the containing TD tag. Am I understanding absolute positioning wrong? It does say
position it at a specified position relative to its closest positioned
ancestor or to the containing block.
Ancestor is TD, right?
Similarly, the top definition says
For absolutely positioned elements (those with position: absolute or
position: fixed), it specifies the distance between the top margin
edge of the element and the top edge of its containing block.
So why does this JsFiddle render the table content block relative to the page, not the TD?
You're missing a position: relative; in the parent TD element. The TD doesn't include that by default.
JS fiddle. http://jsfiddle.net/2p225mv2/2/
CSS to fix it:
td {
position: relative;
}
Because you're missing the part that says: closest positioned ancestor with the key word being "positioned".
Add:
td {
position:relative;
}
and you'll get this jsFiddle example
Can you help me with my dilemma? I have a container (BODY in this case) that has position:relative set. Inside it I have two div's. One relative and one absolute positioned (in this order).
The problem is that whenever I set some margin-top to the relative positioned element, the container's height (body in this case) stretches vertically.
For example, even though I have set height: 100% to the container, its size when viewed is 100% + the margin-top of the relative positioned child element.
Here's a fiddle:
http://jsfiddle.net/xJ75R/7/
First of all, you should not give a relative position to the body, since body takes up the whole page.
Anyway, be specific when applying the relative position to another element, so if you have a class of "lists" then use
.lists { position: relative; top: something; left: something }
or margin, or whichever rule.
If you are just having problems with the body tag after giving some margin to ANOTHER element (though I do not see how this would happen), then give the body a margin of 0, like:
body { margin: 0; }
and if that doesn't work then use !important like
body { margin: 0 !important; }
On a side note, use firebug addon for firefox to make your CSS life easier and see what's happening on the fly.
Is it possible to put absolutely positioned DIV behind the SPAN or relatively positioned DIV? It seems to me that z-index does not affect SPANs etc.
Use span { display: block; }.
I think that will place the span above the absolutely positioned div. And the z-index should also be defined. Also, I usually don't use position: relative for a div that has to be placed below other div's.
I'm trying to accomplish the following layout,
http://www.rae-mx.com/test/css-layout.jpg
and I'm almost there, except for the last green div, which is going lower and lower depending on the content of the content (white) div. If I set a value for the TOP property for the green div, and then I add some more text to the content div, the green div goes lower and lower.
Since the green div is child to the main container div, and the green div is relatively positioned, isn't it supposed to be placed specifically at the position indicated by the TOP value of it? If I'm incorrect...can someone please tell me how can i make it so that the green div is always displayed at the same spot within the container (gray) div, regardless of the height of the content/white div?
I tried to paste the css code here but was having problems with the brower. you can see the test site source/css at http://www.rae-mx.com/test
tia for the help.
I think you're misunderstanding how relative positioning works. If something is marked as position: relative then that does nothing to that element's positioning. However any descendant elements with position: absolute are positioning relative to that element.
So a basic skeleton for what you want is:
#main { position: relative; }
#menu { position: absolute; top: 10; right: 10; }
#content { position: absolute; top: 30; }
#contact { position: absolute; top: 180; right: 10; }
Take a look at Absolute and Relative Positioning. This is called relative+absolute positioning.
If you want something positioned at the same place, use position:absolute instead. Position: relative is used to move the element after it have been placed in the normal flow.
And remember: With position:absolute 0,0 is the upper left corner of the first(closest to the element, when walking from the element and to the root) parent with position:relative or position:absolute
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 right now disregards padding of parent. This seems counter-intuitive to me. Am I missing a quick fix (I can't add padding/margin to child)? Did I mess up the DOCTYPE?
Thanks!
Matt Mueller
Since you have specified position absolute for the child element this behavior is the correct one. The child will be positioned absolutely with the left and top value.
In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is removed
from the normal flow entirely (it has
no impact on later siblings). An
absolutely positioned box establishes
a new containing block for normal flow
children and absolutely (but not
fixed) positioned descendants.
However, the contents of an absolutely
positioned element do not flow around
any other boxes. They may obscure the
contents of another box (or be
obscured themselves), depending on the
stack levels of the overlapping boxes.
Visual Formatting model - Absolute positioning