I see top/left properties display difference with position absolute and position relative as it should.
When I set margin-top on position:relative it positions correctly according to containing container. BUT when I set margin-top on position:absolute, I think it should be positioned according to BODY element but it is positioned same as position:relative which is relative to containing element (#container). And I have not set any element non-static as well.
Here is code with position:relative
http://jsfiddle.net/uFta4/
And here is with position:absolute
http://jsfiddle.net/uFta4/2/
Please note that #firstDiv is positioned at same location which is relative to #container.
Should it be relative to BODY element?
Its because there is difference between RP and AP elements in a sense that RP elements 'collapse' their margins while AP element doesn't collapse their margin. That's why you are seeing AP element at same position because its also counting BODY margin you gave in its tag.
To make you understand better I have put couple of codes.
Look at following variations and observe different behavior margin collapsing of RP and AP elements.
RP
RP element margin collapse http://jsfiddle.net/uFta4/6/
AP element margins is added http://jsfiddle.net/uFta4/7/
AP elements with -ve margin added (becomes -20px) http://jsfiddle.net/uFta4/9/
RP elements with -ve margin collapse(doesn't become -30px) http://jsfiddle.net/uFta4/10/
I hope now it will be clear to you.
Margins are supposed to behave the same for position:absolute and position:relative.
In your first example, the relatively positioned element doesn't have position values set, so there's no effect.
In your second example, the absolutely positioned element doesn't have position values set, either, so it's at the top left corner of the body. That's 60px from the top to account for a 20px margin on the body and a 40px margin on the element itself.
And, to quote from the specification ...
Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
Related
I got a DIV in my HTML-Markup, which is positioned relative. The DIVs inside this container are absolute.
this destroys the complete layout, because the following HTML-Elements are now positioned wrong, the (above) DIV which is relative, overflows them...
but why? How can I fix it?
Once you position a container with :relative, everything inside it will be positioned in relation to that. The position:absolute pulls the child elements out of the flow of the page an positions them at the top of the container with position:relative.
Thus, once you have elements with position:relative, you will want to also add rules to move and position the child elements. Consider using left: and top: or right: and bottom to position your :absolute child elements.
Alternatively, you might try to position the child elements with :relative as well, if you don't want them pulled out of the flow of the page.
Do you have code to look at, or a jsfiddle? Otherwise it's difficult to know what's going on and to suggest a fix.
If your relatively-positioned element only contains absolutely-positioned elements, you need to give it a height setting, otherwise it will have zero height (the absolutely-positioned elements won't be counted for auto height), and therefore probably cause some overlapping with subsequent elements.
Am a right to conclude that a CSS margin (e.g. margin-left) influences the final position of an absolute postioned element? It seems a negative margin-left pulls it to the left (of it's absolute postion), a positive value to the right (of it's absolute postion).
Can someone explain me more about the combination absolute positioned elements and margins?
Thanks.
Correct. Margins influence where the edges of an absolutely positioned element begin.
Lets understand it this way:
When you have an statically-positioned element, the element is part of the normal flow of the document. Hence, any margins applied on it are considered 'with respect to its surrounding elements'.
When you have an relatively-positioned element, the element is still part of the normal flow of the document. Hence, any margins applied on it are still considered 'with respect to its surrounding elements'.
BUT,
When you have an absolutely-positioned element, the element is taken out of the normal flow of the document. This element's positioning is now dictated by the first parent container that is not statically positioned (or the top level body element as a fallback). Hence, when you apply margin, the parent container is taken as the 'surrounding element' and the margin in calculated with 'respect to it'.
Hope this helps.
In CSS, Is the top property related to the top of the page, or the top of the parent element?
If not the top of the parent element, is there some property attached to it?
CSS/top definition
For absolutely positioned elements:
This property specifies the distance between the top margin edge of the element and the top edge of its containing block.
For relatively positioned elements:
This property specifies the offset is with respect to the top edges of the box itself.
The 'top' property refers to the element's top offset from its nearest positioned parent, if the element itself is positioned absolute. If an element is positioned with relative positioning, the top property indicates the top offset of where the element would regularly render. So an element with a relative position with a top of 2px, for instance, would appear 2 pixels lower than where it would otherwise render.
I don't think I really understand your question though, can you ask it in another way?
Are offset properties (left, top, bottom, right) only for non-static positions?
Can they be applied to a statically positioned element? If so, what are the differences from
applying them to non-statically positioned elements?
to offset an element it's position has to be position:relative
the co-ordinates, top, right, bottom and left serve different purposes depending on if the element is relatively or absolutely positioned.
When is an element offset as opposed to moved?
when you actually offset using position: relative; the element is not removed from the flow, and indeed the space that the element would have taken up if it had remained static (the default) is still reserved for it, therefore you have just offset it from it's original position. Any element following it will appear where it would have done even if you hadn't offset it's predecessor - like this example
Moving, not offsetting
If however you actually want to move an element, then it needs to be removed from the flow, so there is no space reserved for it, and then that's when you use position:absolute; or fixed.. that is the difference
Summary
static is the default, and you just use margins to move it around, it will ignore co-ordinates and z-index
relative is reserved space, co-ordinates will offset it from it's original space
absolute will remove the element from the flow and the co-ordinates will be calculated according to it's containing block, which is the nearest relatively positioned ancestor (or the body element if no relatively positioned ancestors exist)
fixed does not have a containing block, i.e. you can't specify which element it should be positioned in relation to, it will just fix itself in relation to the viewport
and finally an element will not accept a z-index if it's position is the default of static, so position: relative; without any co-ordinates applied is similar to static, but it is useful for z-indexing and being a containing block for absolutely positioned elements
It makes little sense to apply them to position: static elements, as they are static.
To shift a static element over by a certain amount, you can change it's position property to position: relative;.
Now, you can shift it around with top, left, etc.
There exist a few more types of position, namely position: fixed and position: absolute.
fixed makes the element fixed to the screen and it's unaffected by scrolling, so it's as if it's stuck to the computer monitor. Setting its top, etc. sets the position.
absolute makes the element positioned relative to the document and ignore all layout rules. Setting it's position sets where it is positioned on the document.
They can be applied to absolute and fixed position elements, which are essentially the same but fixed always uses the document window as its anchor. You can also apply them to relatively positioned elements in which case they are an offset from what is best described as the default inline positioning.
I'm not sure if I fully understand the difference between these two.
Can someone explain why I would use one over the other and how they differ?
You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse.
If you wanted the element to have no effect on the surrounding elements, you'd use positioning (abs., rel.) and the top, bottom, left and right settings.
With relative positioning, the element will still occupy its original space as when positioned statically. That's why nothing happens, if you just switch from static to relative position. From there, you may then shove it across the surrounding elements.
With absolute positioning, you completely remove the element from the (static) document flow, so it will free up the space it occupied. You may then position it freely - but relative to the next best non-statically positioned element wrapped around it. If there is none, it'll be anchored to the whole page.
top is for tweak an element with use of position property.
margin-top is for measuring the external distance to the element, in relation to the previous one.
Also, top behavior can differ depending on the type of position, absolute, relative or fixed.
Margin applies and extends / contracts the element's normal boundary but when you call top you are ignoring the element's regular position and floating it to a specific position.
Example:
html:
<div id="some_element">content</div>
css:
#some_element {margin-top: 50%}
Means the element will begin displaying html at the 50% height of its container (i.e. the div displaying the word "content" would be displayed at 50% height of its containing div or html node directly before div#some_element) but if you open your browser's inspector (f12 on Windows or cmd+alt+i on mac) and mouse over the element you will see it's boundaries highlighted and notice the element has been pushed down rather than re-positioned.
Top on the other hand:
#some_element {top: 50%}
Will actually reposition the element meaning it will still display at 50% of its container but it will reposition the element so its edge starts at 50% of its containing element. In other words, there will be a gap between the edges of the element and its container.
Cheers!
The top property is a position property. It is used with the position property, such as absolute or relative. margin-top is an element's own property.
from bytes:
"Margin is that space between the edge of an element's box and the edge of the complete box, such as the margin of a letter. 'top' displaces the element's margin edge from the containing blocks box, such as that same piece of paper inside a cardboard box, but it is not up against the edge of the container."
My understanding is that margin-top creates a margin on the element, and top sets the top edge of the element below the top edge of the containing element at the offset.
you can try it here:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
just replace top with margin-top to see the difference.
This is my understanding...
TOP: it defines the position of the element wrt its own elements or other element i.e in case of relative top refers to compare with its own element whereas in fixed top refers to compare with viewport.
Margin_Top: it always refer to its own elements that adds an offset(outside) to its border