Is there any way to absolutely position a div relatively to its sibling? For example: Inside a div there are two other divs - div1 and div2. I want to absolutely position div2 relatively to div1.
Absolute positioning is dependent on the "current positioning context", which may include a parent element (if absolutely or relatively positioned) but will never include a sibling element.
Can you reorganize your dom so that you have a parent-child instead of siblings? If so, you could set the parent's position to relative or absolute and the child's position to absolute and the child's position would remain absolute in relation to the parent.
There is no way using absolute position, according to w3c specification:
In the absolute positioning model, a box is explicitly offset with respect to its containing block
— relatively to parent block, not to sibling one
And no way to use relative positioning, also according to to w3c specification:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position.
— relatively to block's position, not to sibling block
summary:
Nobody can solve problem you described
The correct answer is: No, but at least its vertical position can be affected by siblings.
As the other answers state, the position of an absolutely positioned div is relative to its ancestors. To be precice, it is relative to the first ancestor that isn't statically positioned, when traversing up the DOM-tree.
However: an absolutely positioned element will also be affected by its siblings (the ones that come before the element). If those preceding siblings are relatively positioned, and your absolutely positioned element has its top-property not set, then it's placed vertically below those relatively positioned siblings.
<div class="relativeContainer">
<div class="relative block">relative 1</div>
<div class="relative block">relative 2</div>
<div class="absoluteTopZero block">absolute top 0</div>
<div class="absoluteTopInherited block">absolute</div>
</div>
See this fiddle:
https://jsfiddle.net/fgxeu54t/28/
Depending on your needs, you can float them or position both absolute with appropriate left/top/right/bottom values.
Post your markup and explain exactly what you're trying to achieve.
Try it with jquery
<script type="text/javascript">
$('#div2').css('margin-left', $('#div1').outerWidth() +XXX + 'px');
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.
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.
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.
I'm reading through the w3c.org Visual Formatting specification.
Could anyone explain to me why the inline box "outer" is not displaying in my example here? I was trying to understand absolute and relative positioning. Since there was no positioning on the <p>tag, I thought that by setting the positioning values on <div>, the <span id="outer"> would absolutely position itself to the div. But that is not happening. If I remove the position:relative from the <div> the <span id="outer"> will display. I tried setting the z-index on the <p> to change its stacking order and make it higher than the <div>, but that didn't work either. From what I'm understanding, if an element is position:absolute, it will traverse the DOM for the first "positioned" element and position itself with that 'parent' element. And if no positioning is found, it will position itself to its containing element. This doesn't seem to be happening, since its containing element is <p id=inline> when there's no positioning, yet the <div id="container"> has position:relative. I hope I'm explaining this right.
It is being properly displayed, but it's still subject to the borders of the containing div. You've got that div set to "overflow: hidden", and the #outer span's absolute position makes it fall outside the div's borders, so it's effectively invisible.
If you take off the "overflow: hidden", you'll see the box show up instantly.
I've got 4 divs inside a parent div. To get them to appear side by side, I've given all 4 divs a style with float:left. The divs do appear side by side, but the parent div's height does not grow to encompass the height of the child divs. What am I missing?
This is a quirk cause by the implementation of floating elements, and occurs when you have a parent element that contains nothing but floating child elements. There are two methods to solve it. One is to set the parent element's overflow property to hidden, sometimes known as the overflow method. The other is known as the clearfix method, and involves the use of the :after pseudo-class.
The clearfix method has the advantage of allowing for specifically positioned elements to "hang" outside of the parent container if you ever need them to, at the expense of a bit of extra CSS and markup. This is the method I prefer, as I utilize hanging elements frequently.
Set overflow: hidden; on the parent div.
Explanation: floating elements removes them from the regular document flow. So, if a given element contains only floated elements, it will not have any height (or, by extension, width -- unless it has an implicit width that is default on block elements).
Setting the overflow property to hidden tells the parent element to respect the width of it's children, but hide everything that falls outside it's width and height.
Of course, the other option is to add an element after the floated divs, inside the parent, with clear: both; This makes the last element be positioned after all the floats, within the regular document flow. Since it's inside the parent, the parent's height is whatever the heights of the floated items are, plus regular padding and the height of the cleared item.
After the 4 divs, you need to "cancel" the float style.
This is done through the creation of a p for example, like: <p style="clear: both"></p>
Your parent div will automatically get the right size.
millinet's answer will work, or you could float the parent div which will also allow it to expand to contain its content
I think you should give the parent div a height of 100% not fixed so that it encompasses the height of child divs if they grow.
I recommend the clearfix method as well. This problem occurs because floating an element removes any height that it would normally contain.
PositionIsEverything posts a complete explanation as well as corresponding solutions for IE6, since the :after pseudoselector is not supported by older browsers.
If you want the divs to be side-by-side, you could try using inline-block:
<style>
.alldivs {
display: inline-block;
}
</style>
<div id="wrapper">
<div id="div1" class="alldivs"></div>
<div id="div2" class="alldivs"></div>
<div id="div3" class="alldivs"></div>
<div id="div4" class="alldivs"></div>
</div>