Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
This link says
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
So absolute is in fact relative. So why not just use relative instead? Are there any practical use cases which can only be done by using absolute positioning but not relative?
So absolute is in fact relative.
NO, both are completely different, their rendering is completely different.
A relative positioned element is in the document flow whereas an absolute positioned element is out of the document flow.
Are there any practical use cases which can only be done by using absolute positioning but not relative?
Assume that you want a title on image hover, you need to position the title containing element absolute to the element holding image which has to be positioned relative. If you do not assign position: relative; to the element holding absolute positioned elements, your absolute positioned elements will just flow out in the wild.
Case
Case 2 (If element is not positioned relative, your absolute positioned elements will flow out in the wild)
So inshort, you can say that the absolute positioned elements DO NOT take any physical space on the document as they are out of the flow so inorder to save them flowing out in the wild, we use a container element positioned relative, where relative positioned do take space as they are in the flow so when you move your absolute positioned elements anywhere on the page, they won't affect any other elements position but if you move your position: relative; element anywhere on the page, yes it will affect other elements - static or relatively positioned around it.
An element with relative positioning remains within the flow of the document. Any additional positioning you provide will offset the element from this position.
An element with absolute positioning is removed from the flow of the document, and is positioned with respect to its first nonstatic parent element.
So let's say you have the following HTML structure, and an accompanying fiddle:
<div class="awesomeParent">
<ul>
<li>First Piggy</li>
<li>Second Piggy</li>
<li>Third Piggy</li>
<li>Fourth Piggy</li>
</ul>
</div>
Now checkout the same fiddle, modified a bit using relative and absolute positioning. See the difference?
In the second fiddle, using relative positioning, the space where the third list element should be is preserved. It's only being offset by the additional top: 40px; rule.
However, in the third fiddle, using absolute positioning, the space where the third list element should be is gone. In other words, that element is no longer in the normal flow of the document, and now the positioning rule top: 40px; is with respect to it's first nonstatic parent. In this case, this is the div .awesomeParent, which has a position: relative. If no parent had been found, then the element would have been positioned with respect to the html element. So in order to position an element absolutely within another element, you'll need to use position fixed, absolute or relative on the parent itself.
Images so you can compare the three:
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
div1.innerHTML = "ab ab ab ab ab";
#div0 {
position: absolute;
}
#div1 {
position: absolute;
width: auto;
}
<div id="div0">
<div id="div1"></div>
</div>
The text in div1 will break at blanks. Div1 will be a block with narrow width and long height.
If div1's position is set to static, relative, or fixed, the div will stretch to fit the text's width.
I want to learn more about this behavior of DIV element.
Why "fixed" is different with "absolute" in this case, and this behavior is a standard? (I am particularly concerned about this question.)
UPDATE:
I think I found the answer. I don’t set the width of the container of div1. The container is aboslute position. So its width is 0 and div1's width is also 0. If div1 is set to fixed, its parent will be window or viewport. Thus div1's width will be enough long.
Code at Fiddle
I did not describle the container in my origin question. Sorry.
PS: I worked with html/css for years. But There are always some simple, odd and surprising problems occur to me. Frustrating.
Im gonna consider this as a 2 part question the first the one with the actual code and the second how does the position property work. For the former, I think we need more code to understand your situation as for the second part,
The position property can have the following values,
static Default value. Elements render in order, as they appear in the document flow
absolute The element is positioned relative to its first positioned (not static) ancestor element
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position.
the difference between fixed and absolute is that absolute means the position of the element is set with regard to its ancestor elements. Usually, we give position:'relative' to the parent element and then we use postion: 'absolute' to define the position of the child element eg
<div style="position:relative">
<img style="position: absolute, top:10px">
</div>
Here we set the position of the div first, then we set the image whose top will be 20px from the top of the parent div(ie its position is relative to the div)
Now with fixed the child element will have the position with respect to that of the browser, taking the same example
<div style="position:relative">
<img style="position: fixed, margin-top:50px">
</div>
Now the image will be 50 from the top of the browser, regardless of where its parent div is. The parent could be at the bottom of the page but the div will always be 50px from the top of the page
So for absolute and fixed there is a chance the child can jump out of the parent container regardless of the parent container.
If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
If the parent has a position other than static, the child no longer overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;position:relative;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
Why does this occur? What is this behavior called?
I'm using Chrome, is this behavior consistent across browsers?
That's because the spec defines overflow as
This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.
The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"
If the element has position: absolute, the containing block is
established by the nearest ancestor with a position of absolute,
relative or fixed
Therefore the absolutely positioned element is not affected by that overflow: hidden.
If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.
First of all, take a close look at the MDN Documentation CSS Position.
So how does this relate to your question? let's first analyze position: absolute:
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.
As far as your case goes, the positioned ancestor div element does not have any specified position attribute to it.
Therefore, it assumes the default position: static which literally specifies nothing other than the standard position of the element in the page. Check it out:
static:
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
In other words, the child will not be positioned relative to its parent. The weird behavior is because you expect the parent div to be positioned when is not positioned at all. It falls to ask: what is the nearest positioned parent then? The answer is to go up on the DOM tree and find it, logically since you have nothing in your example but your two div, the nearest parent will be webpage document itself.
So, how can you fix this? By adding (for example) position: relative to the parent div element.
EDIT: Overflow and Position properties:
By using overflow, you are typically trying to do one (or all) of the following: clip content, render a scroll bar, display any overflown content in a particular way. I gather your goal however is to have the child div not overflow the parent div. The question of how to avoid this overflow can take you to a place you do not want to go.
So by narrowing down what overflow is all about: (long story short) it is about controlling/modifying the look and feel of the content of what is inside a particular HTML element. Keep in mind, the content, not the element itself.
In your case, you may perceive the child element of your parent div as being the content of the parent div. Rather, what you actually see is the contents of the child element. The positioning of the parent and child with respect to each other is thus not controlled by the overflow property, but by the position property.
Is this consistent across browsers?:
Since CSS 2.1, the overflow (visible | hidden | scroll | auto) and position (static | relative | absolute) have been supported in all major browsers. Any discrepancies would occur when you extend on the overflow since certain of its attributes are not widely supported. See here for reference: Can I Use: Overflow (also scroll to the bottom for the CSS 2.1 reference).
Do you have any questions about this? Ask in the comments below.
overflow property is not inherited anyhow: http://www.w3schools.com/cssref/pr_pos_overflow.asp
So in your first case it is understandable it is not working, since with static position the browsers put it in the order it reads and overlooks collisions.
In your second case absolute positioning actually sets a space for the container div and then puts the second div into it - thus makes the overflow hidden.
You can imagine it this way: in your first case you created two divs which are not related to each other but positioned on each other in the second case you created a container and forced another div into it by setting the container's overflow to hidden.
Hope it helped easy understanding,
Andrew
The relative value for the position property is very similar to that of the static value. The primary difference is that the relative value accepts the box offset properties top, right, bottom, and left. These box offset properties allow the element to be precisely positioned, shifting the element from its default position in any direction
I was working on a site and have a parent element with position:relative that has child elements with position:absolute. What's strange to me is that with the positions I mentioned, the child elements seem to still recognize their parent and have scope within it.
heres a fiddle to demonstrate what happens.
This actually ended up working to my advantage, but I'd like understand what happens to cause this.
Absolutely positioned elements are placed in relation to the first positioned parent element. It is acting as it should.
if you look at the definition of position: absolute then it will make more sense.
absolute position: The element is positioned relative to its first positioned (not static) ancestor element
as far as i know, absolute positioned element (.e.g.span style="position:absolute") will position based on its ancestor's position context, but this absolute positioned element WILL NOT create a new positioning system for its children, is that right?????
if #1 is correct, can someone tell me why parent is allowed to set to absolute position in this document? (just search exactly this line in quote will bring you to the relevant paragraph "Specify the parent container as position:relative or position:absolute."
http://phrogz.net/css/vertical-align/index.html
parent in that link must be 'relative' right, but not absolute, why does it say absolute is ok? because only relative creates new positioning context, so in that link bullet #3, the top 50% should not work
(1) is not correct. Elements with positioning defined will be positioned relative to the nearest ascestor that has its position set to anything other than static (the defautl).
from: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning:
In the absolute positioning model, a box is explicitly offset with respect to its containing block. .... An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants
Note also: relatively and fixed positioned elements also establish new containing blocks for absolutely positioned elements.
JSFiddle
How can I get the 'Tree' to be positioned at the top inside the second row?
I have read some sources on this, some claiming that fixed is positioned relative to its outer container, other relative to the browser window. On position:absolute, I've read that it's relative to the browser window, but w3schools claim that it's relative to the first positioned element. All of this is making my head a little fuzzy, and despite playing around with both properties I have not been able to really get my head around this.
position:fixed always refer to the browser window. A fixed positioned element won't change it's position when scrolling the browser window.
If you want a relatively positioned element inside another element, you must give the container (parent) element a position:relative;, and the element inside it a position:absolute;. This way the absolutely positioned element coordinates will be based on the parent (relatively positioned) element.
Also, when trying to use absolute and relative positioning for a layout, it's better not to use tables.
Update
The absolute positioned element will search through the DOM tree, looking for the nearest ancestor that is positioned as well. If it finds none, it will position itself relative to the browser window. – Justus Romijn
Update 2
just give position:relative; to the td containing the absolute positioned element, like this
http://jsfiddle.net/E2gYN/5/