I have multiple elements with relative position and their child's having an absolute position. The moment is applied for all child absolute position, all elements are stacked on the same top and left value.
Can anyone explain me, what is the logic here?
At the bellow image, the difference between the Relative and absolute position shown
The point is that in the relative position: element position set according to the other elements that are in the page
and
For absolute position: element position set according to the window not any element in the page
The problem was when I applied for the absolute position I came out of parent and parent height and width become Zero. :D
Related
I am told that an absolute value will position an element in relation to the nearest non-static element.
But can't a relative element position itself in relation to another relative element?
I have to pick 1 answer to the main question, and the options are relative, absolute, static, fixed.
But I see that there are two answers to this question or am I wrong?
Only "Absolute" value position element in relation to parent non-static element.
An element with position "relative" is positioned relative to its normal(default static) position.
An element with position "fixed" is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
An element with position "absolute" is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
I have div which hosts another div. Ok, I get the case when the parent is position:relative and
the child is position:absolute. I don't get what happens when
parent's position is absolute and child's position is relative
parent's position is absolute and child's position is absolute
parent's position is relative and child's position is relative
I use the JSbin example from Why does an absolute position element wrap based on its parent's right bound? but the question applies to positioning concept in general
Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.
position: absolute will position that element to its nearest parent with a position other than static. Static is the default for everything.
position: relative is a little weird because it really affects that element's children, not its own position. It's just saying to its child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but its children might.
So consider a situation like this:
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.
If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.
However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.
In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.
And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.
If the mommy is relative and the child is absolute : the mommy listens to her child. as if to protect him. sort of..
If they are both absolute : they have nothing to do with each other. they are strangers to each other.
If the parent is absolute and child relative : they are bound. the child moves ( width and height ) towards or away from his mommy.
It will always be a little strange, there are a lot of great texts about this, but also for me it is always just switching absolute and relative until it works. hope this clears it up a little.
My client gave me access to change just a part of his HTML and its like:
<div style="position:relative;">PUT YOUR CODE HERE</div>
The problem is that I need to put an absolute div left:0px and top:0px to stick in the top of the page but instead it sticks relative to the above.
Can I, being inside a relative div, position absolute elements to the window and not the parent relative div with just css without using any other trick? I mean, I dont want to use JS to calculate the top/left position of the relative and then subtract it from my inside absolute div.
Thank you.
No; not unless you know the distance to the top-left corner in which case you could use a negative top: and left: value.
Absolute positioning is relative to the closest ancestor with a non-static position.
Why doesn't position:absolute always mean absolute to the document? When you have a divB, for example, inside a another divA. If divA had no position, would divB's absolute be absolute to the document?
If you create a position element and you put another element inside of it that has position, is that child always relative (for lack of a better word) to the parent/containing element? In other words, if I have a container that is position:relative, but a child that is position:absolute, that absolute is only absolute to the parent, right? Thanks.
An element with position: absolute is absolute to it's nearest non-static parent container. For example, I have a position: relative div, inside that a normal paragraph, and inside that an absolute span. That span is absolute, not to the paragraph (which has no defined position, so is default to static) but to the div which is relative.
For relativeness to the whole document, you used position: fixed. The reason (in your example) that divB would seem absolute to the document, is because it doesn't find any parents with position:relative, and eventually ends up using the body.
Absolute is not necessarily absolute relative to its parent, rather its nearest ancestor that is positioned. So if the parent of an absolutely positioned element doesn't have a declared position, then dependency will fall until the ancestor (parent of parent of parent... etc) is positioned.
http://www.w3schools.com/cssref/pr_class_position.asp
(Note the Property Values section toward the bottom)
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.