what is the containing block of an absolutely positioned element? it seems the rule can be a bit complicated...
the spec should be here:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
i want to verify if the following is true:
for simplicity, assume the containing block is a block element (not inline element)...
1) if the absolute positioned element has a closest ancestor that is positioned "non static" (relative, fixed, or absolute), then that ancestor is the containing block. the absolute positioned element is relative to it.
2) if there is no such ancestor, then the viewport is the containing block, and so the absolute positioned element is relative to the viewport.
no matter what the containing block is above, the width:100% or n% and height:100% or n% are both relative to the containing block.
that's why a
<div style="position:absolute;width:100%;height:100%;background:green"></div>
right under <body> will cover up the whole viewport exactly -- no more, no less.
we could also use position: fixed, except IE 6 doesn't support it... and so the poor programmer need to use position: absolute instead... (well, not a big deal)
Is that an accurate description of an absolute positioned element? If so, i think IE 6 and above, FF, Safari, Chrome all follow this behavior accurately?
You are correct. The containing block is the last positioned element. so if you want to explicitly set the container then give it position:relative. Most browsers get this right. CSS doesn't really have a 'viewport', I think the top is the HTML element though don't hold me to that. IE prior to 7 had an unnamed element above HTML though.
Summary:
position: relative
Does nothing except set the positioning context for all the elements contained within it. You can then position: absolute any element it contains by setting (typically one or two) values from the possible top, right, bottom or left.
If you give an element with position: relative a top, right, bottom or left value, it will shift position accordingly but leave a blank space where it would be by default. In other words, it remains within the document flow but offset.
position: absolute
To position something absolutely, you need to ask 'absolutely, but relative to which containing element'? It will either be the entire body (the default) or some other element on the page that is already positioned (usually with relative or absolute - fixed is also useful and supported in IE 7 but see this bug). It is then taken out of the document flow - other elements might appear beneath it, but won't flow around it. If it appears behind another element, you need to set the z-index property to move it in front.
A common solution is to have a centred container (margin: 0 auto) with position: relative within which other items are placed with position: absolute.
Finally, I like this little interactive CSS positioning demo.
Related
This question already has answers here:
Difference between static and relative positioning
(7 answers)
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 3 years ago.
Following this link.
It states:
An element with position: relative; is positioned relative to its normal position.
How can we define 'normal position'? Is it in context of parent element or overall screen(viewport)?
"Normal position" is in the context of the DOM, and refers to Normal flow:
First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them.
By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content.
This is explained in further detail in the CSS flow layout:
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.
In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
It's worth noting that all elements have static positioning by default:
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."
And relative positioning simply allows for modification of the position:
This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position.
Normal Position is the actual position of the element in DOM. If you remove the left property for the div in below example then it will be shifted back to its normal position.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
Hope it helps.!
The normal position refers to the initial position of certain element within the viewport.
You can relatively move (top, right, bottom and left) an object if this object has position: relative set and it will move depending on the starting position of this same element.
Also, let's say you have a parent div with a position set to relative; then. inside of it you have another div with the position set to absolute. This second element will 'absolutely' move in its parent context/size which is the div with the relative position.
Take a look at this link so you have some extra idea of how it works.
I know it seems kinda weird at first but you can easily get it with practice.
Relative means it is relative to the content on the page. If it's in a row with inline set, it is relative to the one beside it - meaning it will be positioned next to it, relative to where a div without any position would normally go.
So if there is nothing on the page, it will flow the same as all other content, and position to the top left by default.
The definition of 'absolute' positioning is: "The element is positioned relative to its first positioned (not static) ancestor element".
My question is how does the element behave when all ancestors are 'static'?
Can we say that in this case, 'absolute' positioning behave as 'fixed' positioning?
Can we say that in this case, 'absolute' positioning behave as 'fixed' positioning?
No, not entirely. The behavior is the same with respect to the top, right, bottom and left offsets, but not with respect to scrolling, which is what distinguishes fixed positioning from regular absolute positioning.
When there are no positioned ancestors, the containing block of elements with position: absolute is the initial containing block.
The containing block of elements with position: fixed is the viewport, not the initial containing block. The viewport does not move when scrolling, but the initial containing block does (because it can be larger than the viewport), which is why fixed-positioned elements do not scroll with the page, but elements with position: absolute do, even when the latter have no positioned ancestors.
You can manipulate the page layout such that the content scrolls but the initial containing block never does, resulting in a hack that makes position: absolute with no positioned ancestors behave like position: fixed, even in Internet Explorer 6.
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 am creating a website here. In the HTML I have two lines:
<span class="header_text">Trapped in payday loans?</span>
<span class="header_text2">We can help you!</span>
The class .header_text and .header_text2 are defined in css.css with the attribute position: absolute.
Would it be more professional if I changed CSS position from absolute to relative?
How do I change position from absolute to relative? When I do so the text appears in wrong parts of the page.
You change it for functionality - neither is more professional.
position: relative. Though it will probably appear in wrong parts of page because its offsets no longer apply.
It depends what you want to achieve, there is no more professional, both values serve their purpose but they are different. You cannot just change one for the other.
But if you change absolute for relative, most likely you have to place the elements in question somewhere else in your HTML to achieve the same effect (if even possible).
For completeness:
relative
Lay out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
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.
The biggest difference is that elements positioned with absolute are taken out of the normal page flow (that is why it is said do not leave space).
Always stick to absolute, relative is not very professional and normally dumb people use this just to show off they can use odd layout to impress others.
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