The question is that even though the right property is set to 0, then why the child div is aligned to the left side, when it should be on the right side of its parent div?
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.child {
position: relative;
top: 80px;
right: 0px;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="relative">This div element has position: relative;
<div class="child">This div element has position: relative;<div>
</div>
The result of above code is:
I have found an answer to my question. My misunderstanding was that when we set position: relative, it is set relative to the nearest ancestor, which is not the case. It is set according to where it should be normally. so right property works on its normal position. It does not consider where the nearest ancestor of the element is.
Related
I'm trying to understand how nested divs works. I know that a "position absolute" search for a "position relative". But if we have a "position absolute" inside another "position absolute", what will it use as "position relative".
.box {
border: 2px solid black;
width: 500px;
height: 500px;
position: relative;
}
.box1 {
position: absolute;
width: 220px;
height: 220px;
border: 2px solid black;
background-color: red;
bottom: 25%;
right: 25%;
}
.box2 {
position: absolute;
height: 70px;
width: 70px;
border: 2px solid black;
background-color: green;
left: 10%;
bottom: 10%;
}
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>
It looks like in the result that box2 is absolute relative to box1. But shouldn't it be box, which is the first parent with "position relative"? Can anybody give an explanation of the mechanics?
I know that a "position absolute" search for a "position relative".
This is misconception.
An absolutely positioned element is positioned with respect to its closest positioned ancestor.
An element is positioned if it has any computed position property value that is not static.
This can be relative, absolute, fixed, or sticky.
position: relative is not a special case for this. It is just a positioning scheme that makes an element positioned without taking it out of normal flow. This makes it a popular choice for making an element the context for some absolute positioning without having side effects on the position of that element.
I understand that any element with position: absolute will be positioned relative to the nearest ancestor with a positional attribute such as absolute or relative. This is mentioned in various answers for example here. Also on the w3schools site here...
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
However, inserting a static element appears to disrupt this rule and shifts the absolute element. I'd like to understand why that happens. See code snippet below.
If the static element is chaged to absolute, the subsequent elements are displayed as expected (according to the nearesst positional ancestor rule).
div.relative {
position: relative;
width: 440px;
height: 600px;
border: 3px solid #73AD21;
}
div.static {
position: static;
width: 200px;
height: 100px;
border: 3px solid #73ADff;
}
div.absolute {
position: absolute;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
div.absolute2 {
left:210px;
position: absolute;
width: 200px;
height: 100px;
border: 3px solid #ffAD21;
}
<div class="relative">This div element has position: relative;
<div class="static">This div element has position: static</div>
<div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div>
<div class="absolute2">This div element also has position: absolute;</div>
</div>
As this answer explains, if there is no (top, left, right, bottom) attributes the position: absolute element will be positioned by default as if it was part of the normal flow , this is helpful in case you want to maintain a position: absolute next to its sibling like a tool tip would, and manipulate it with margin property, let say:
margin-top:-40px;
margin-left:30px;
but if you set any (top,left,right, bottom), this will reset the default position and will be relative to the parent.
top:0
When W3Schools (and the CSS spec) says that an element is "positioned relative to" something, it is never referring to the element's siblings. It's referring to the element's containing block.
The reason a non-positioned element (position: static) affects the layout of subsequent absolutely positioned elements with auto offsets is because absposed elements with auto offsets will assume their static position (see this answer as well as this one RenzoCC links to), and an element's static position, by nature, is influenced by the layout of surrounding elements, especially preceding siblings.
What absolutely positioning an element without changing any of its offsets does, is cause elements that follow it to be laid out as if that element itself were not there. This is what taking an element out of the flow means.
Static position doesn't affect the Absolute position when it comes to the ancestor position which "position: relative".
But the "position: absolute" has a power to position itself whenever you want inside of the (see the additional code I made) "position: relative;" while the "position: static" don't have the ability to used the Top, Right, Bottom and Left because is it a default position where it is only located at the left side.
div.relative {
position: relative;
width: 440px;
height: 600px;
border: 3px solid #73AD21;
}
div.static {
position: static;
width: 200px;
height: 100px;
border: 3px solid #73ADff;
}
div.absolute {
position: absolute;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
/* Absolute Location inside the Relative Position */
top: 0;
left: 0;
}
div.absolute2 {
left:210px;
position: absolute;
width: 200px;
height: 100px;
border: 3px solid #ffAD21;
/* Absolute Location inside the Relative Position */
top: 0;
}
<div class="relative">This div element has position: relative;
<div class="static">This div element has position: static</div>
<div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div>
<div class="absolute2">This div element also has position: absolute;</div>
</div> <!-- / .relative -->
I need to make scrollable element with absolute positioned element inside and some big element for scrolling.
.container{
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
border: 1px solid red;
}
.content{
height: 300px;
background: green;
}
.wtf{
top: 0px;
position: absolute;
height: 10px;
width: 100%;
background: red;
}
<div class="container">
<div class="content">
</div>
<div class="wtf"></div>
</div>
http://codepen.io/anon/pen/pvKwvZ
In this example I need to keep red element inside of green square after scrolling to bottom.
Your .container is set to position: relative. That's why the .wtf-Element moves along with the .container-Element! The .container becomes the reference object for the .wtf-Element because of the position: relative.
To have the .wtf-Element fixed, your could remove the .container position: relative (or replace it by the default position: static), or ...
another approach would be to set the .wtf position: fixed. Again, this would position the .wtf-Element relative to the "outer html", not relative to the .container.
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 9 years ago.
In HTML,When you use the position:absolute css property in child block the absolute value is not taken from parent tag it refer from whole browser window.
the sample code is shown below..
CSS
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
}
.child {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
If you want the arrange the child with in the parent block just add position:relative in the parent CSS
The parent block needs to be have position set to a non-static value, that is:
position: absolute, position: fixed or position: relative.
The value you need depends on the layout application.
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
position:relative;/*this makes all my children s position relative to me */
}
.child {
position: absolute;/* i have an absolute position and i am relative to my parent*/
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
Demo: http://jsfiddle.net/pGvvq/
markup:
<section class=parent>
this makes all my children s position relative to me
<article class=child>
i have an absolute position and i am relative to my parent
</article>
</section>
READ more http://css-tricks.com/absolute-positioning-inside-relative-positioning/