It doesn't make sense to me.
If I want a div to be left:20px;top:20px from the container edge, I should be able to do something like position:absolute-within-parent;. Defining the positioning of a child should not require modification of the parent.
At least it seems more modular and decoupling that way. And as a programmer I've been taught to obsess with that.
Absolute positioning is relative to something called the containing block. The containing block is the closest parent which has relative or absolute positioning (which may be the body element if nothing else could be found). This allows you to position an element relative to any one of its parents. absolute-within-parent would restrict you to only being able to absolutely position an element relative to its immediate parent, which isn't always what you need.
Related
I recently realized how useless the position: static Is , It doesn't offer you anything unless the relative also does.
In fact my question Is "why not just adding this line to our CSS file ?"
* { position:relative; }
so we are always able to easily position any element absolutely from It's parent or moving the element It self around just by left: ... or the same for any direction.
so why elements are not positioned to relative by default?
thanks
Let's take some element in its default static state and make it position: relative;. Just by changing that value alone, nothing happens. It appears in the exact same place that it did before the change. But it does change two things:
It's original location will still be occupied by the element (like there is a ghost of the original element still there taking up space).
If the element has child elements that are absolutely positioned, they are now absolutely positioned within the context of this element.
Advantages
If all elements started out with relative positioning, all two of the items above you'd have naturally. Your top/right/bottom/left values work as you would assume they do right out of the box. Z-index "just works" as well. The positioning context is always constrained to the next parent element, which makes logical sense.
Disadvantages
Most notably, always constraining the positioning context to the parent element is limiting. Let's say you want to position an element in the upper right of the page regardless of where the element appears in the markup. That's going to be tough if the element is buried down the hierarchy. You'll need to reset that positioning context for every parent element. That means setting them back to position: static;, and losing all the benefits of relative positioning along the way.
static positioning is the default because it simply doesn't "interfere" with the positioning of any other element on the page. In that sense, it is the least disruptive state an element can have.
Also, when we are talking about the rendering of the web page which is a very costly and sophisticated operation - it's faster to just draw a page with a lot of static elements than otherwise positioned elements. Modern browsers definitely are very advanced in that regard, but it certainly played a role for browsers 20 years ago.
In terms of convenience: Imagine an element on a dynamic page which you want to position absolutely. You know, which element you want to position it to, but you don't know how many levels might be in between.
With static positioning, you just declare position:relative on your anchor element. With all elements having relative positioning you somehow would need to reposition all elements in between, giving you a hard time.
I have a problem understanding absolute positioning, when the parent is not either absolute or relative. I understand that absolute positioning will place itself based on the offsets with respect to it's parent, which can relative or absolute. If the parent is not absolute or relative? Will it position itself to the nearest absolute or relative element. Or will it position itself relative to the body?
I do not have a problem when the parent is relative or absolute. I have a problem in understanding what is gonna happen if the parent is static. How the absolute element is gonna place itself
This is defined here: http://www.w3.org/TR/css3-positioning/#def-cb
Relevant blurbs from that reference:
For fixed, absolute, center and page, it is defined as follows:
If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a position other than static,
in the following way:
1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
2. In the case that the ancestor is inline-level, the containing block depends on the direction property of the ancestor ...
and
If there is no such ancestor, the containing block is the initial
containing block
More details here: http://www.w3.org/TR/CSS2/visudet.html#containing-block-details
So, to answer your question directly - the containing block is established by the nearest ancestor with a position other than static. If there is no such ancestor, then the containing block is the initial containing block. This incidentally happens to be html. This is the reason why many developers choose to provide position: relative to body in order to avoid confusion with the viewport.
Assigning an element as absolute essentially takes it out of the "normal" flow of the webpage.
This essentially means that absolutely positioned elements can be placed anywhere on the page by instructing them to be at certain points in accordance with their nearest relative parent.
By default, most elements inherit the position of static, meaning they form on the page as they "should" (basically meaning, they follow one after the other depending on where they're specified). To quote Chris Coyier at CSS Tricks, position relative pretty much means "relative to itself", so merely assigning an element to be relative is basically the same as leaving it as static, unless you instruct it position itself otherwise.
Remember, if you set an element to be absolute, it will look for it's closest relative parent - it will progressively look higher and higher up the DOM tree till it finds one, that can sometimes be the <html> tag itself if no others are defined as relative.
The following link explains this topic much better than I can, please check it out: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I'm using the flexible box layout successfully but have a need to put an element positioned absolutely inside one of the boxes.
I've read http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#flex and in particular: Flexibility only applies to elements in normal flow. As absolute and fixed positioned elements are not in flow, any flexibility or flexgroup specified on them is ignored.
The specific use is to embed Google Maps, which has DIVs positioned abolutely and is more or less out of my control. The end result is that the DIV becomes positioned relative to the first non-box element that contains my flexible box layout instead of the box element I put it in. I'm assuming that this is because it was the last element with a real position.
I understand why this is happening, but does anyone know of workaround to put absolutely positioned elements inside a flexible box element such that the absolutely positioned element's position is relative to the flexible box element. I think that makes sense.
O.
I think the only work-around is using an <iframe> - it can be positioned using flexible box layout while its contents (Google Maps) use absolute 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.
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.