This question already has answers here:
Position Relative vs Absolute?
(10 answers)
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 2 years ago.
So css positions can be relative and absolute, among other types. Also, usually the parent container is set to position: relative; , and the children is set to position: absolute; to place children relative to its parent.
So when I set the below css example, child1 will be at the bottom left corner of parent container;
.parent{
position: relative;
}
.child1{
position: absolute;
bottom: 0;
left: 0;
}
But, I am wrapping other elements in the child1 class like below, basically child1 is acting like another container relatively positioned in the parent container:
<div class="parent">
<div class='child1'>
<div class-'childOfchild1'>
<h1> Some text or button </h1>
</div>
//some other divs...
</div>
</div>
Where, childOfchild1 will have a position: absolute; so its relative to child1. However, if I turn child1 into relative, it changes its position to the parent. I also tried to set the childOfchild1 to the bottom left corner of child1, but it seems like it doesn't follow the logic I have in mind.
Can someone explain what happens to this? What happens when a relative container is placed within another relative container? Hopefully with examples. Thank you!
An element with position: relative is laid out in normal flow and then shifted from that position the distances specified by the left, right, top and bottom properties.
Ancestors with position: relative have no direct effect on it.
Elements with position: absolute are positioned with respect to the closest ancestor that has position: some-value-that-is-not-static (which includes ancestors with either position: absolute or position: relative).
Positioning is one of the spearheads of CSS. You do well to ask the question because it is not always easy to understand.
To summarize CSS positioning, from the moment you have a position different from static (the default value), your element becomes the new positioning reference for all its direct and indirect children (grandchildren).
There are different potential behaviors of a positioned element though: if we take the case of an element with an absolute position, this is how the browser will position your element:
if its direct parent is positioned (absolute or relative), it will be its positioning reference.
if its direct parent is not positioned, it will go back up to its grandparent, then to its grandparent until it finds a positioned item
otherwise it takes body as a positioning reference (the last positioned parent)
Here is a code example that illustrates some of the cases. You will find in the example squares, the smallest is also the deepest in HTML. (grandson), they all have a semi-transparent color, if it gets dark it means they are overlapping.
The code example with StackOverflow tool
.relative {
position: relative;
}
.absolute {
position: absolute;
}
/* Second */
.ex2 .child {
position: absolute;
bottom: 0;
left: 0;
}
/* Third */
.ex3 .child {
position: relative;
bottom: -10px;
left: 10px;
}
.ex3 .grandchild {
position: absolute;
bottom: 0;
left: 0;
}
/* Fourth */
.ex4 .grandchild {
position: absolute;
bottom: 0;
left: 0;
}
div {
float: left;
margin: 20px;
width: 200px;
height: 200px;
background: rgba(255, 34, 56, .25);
}
div div {
margin: 0;
width: 5em;
height: 5em;
}
div div div {
width: 2em;
height: 2em;
}
<div class=" ex1 normal">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<div class="ex2 relative">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<div class="ex3 relative">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<div class="ex4 relative">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
To summarize: it's all about the question "does this positioned element have a positioned parent, if not, what is the closest positioned parent?"
Do not hesitate to ask further if you have more question.
I'll be glad to help.
Have a nice day!
relatively positioned elements are positioned relative to their normal position "normal flow", and when you adjust the position"top, left,.." it will refer to its normal position as a starting point. so when a relative container positioned inside another relative one, they will not be affected by each other
Related
I want to create a slider, so here is the code:
div#list_container {
position: relative;
width: 100%;
}
div#first_list {
position: absolute;
left: 0px;
top: 0px;
}
div#second_list {
position: absolute;
left: 70%;
top: 0px;
}
<div id="list_container">
<div id="first_list">
<h1>Smth</h1>
</div>
<div id="second_list" class="aim_list">
<h1>Smth</h1>
</div>
</div>
<h2>Following elements</h2>
It kinda works (I would just change left property to move them), but since parent (div#list_container) is positioned as relative, so it doesn't cover children elements, so another elements, which will go after slider are shown above it. How can I fix it?
When you change position of child elements to absolute, they are no longer relative to their parent element. Either make parent absolute while changing children's position to relative, or add height to parent.
I also highly recommend implementing this using CSS Flexbox, otherwise it will be very difficult to maintain. See if you can work with this:
#list_container {
position: absolute;
width: 100%;
display: flex;
justify-content: space-around;
}
#list_container > *{
flex-grow: 1;
}
The problem is that, since your child elements are with absolute positioning, there is nothing that actually expands the box of the parent element. To fix it, you can add height to the div#list_container, depending on your design target.
I'm making a webpage that has a recurring design element of an inset border surrounding a <div> of content. The inset border is done with LESS/CSS, and is itself a <div class="inset-border"> placed after the content but within a wrapper.
It's an approach that's working well for almost the entire page. However, there's one section where the border isn't inheriting its dimensions from the parent wrapper, but rather it's great-grandparent element. Why?
The rendered CSS for the border:
.inset-border {
border-style: solid;
border-color: #ffc174;
border-width: 1px;
height: 90%;
width: 90%;
position: absolute;
top: 20px;
left: 4%;
z-index: 1;
pointer-events: none;
}
The troublesome HTML:
<div class="update-container">
<div class="update-div">
<span class="small-title">Latest Updates</span>
<h2 class="slogan">#Html.Raw(title)</h2>
<a class="updates-button" href="#link">#buttonText</a>
</div>
<div class="inset-border"></div>
And an instance of usage where it's working correctly:
<div class="whitebox-about">
<div class="col-md-6" style="padding-left:0">
<h2 class="slogan-right">#Html.Raw(rightblurb)</h2>
</div>
...
<div class="inset-border"></div>
</div>
What's going wrong?
You need to set position to the parent element.
.update-container {
position: relative;
}
For more details, check MDN - Absolute Positioning.
The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static).
This means, that in order to position your element relatively to its parent you need to set a position to the parent.
.parent {
position: relative;
}
.child {
position: absolute;
}
Now the child element will be positioned relative to its parent. We could use any position value instead of relative (except static), but usually relative is preferred as it positions the element relatively to itself, thus the layout does not change.
Let's say I've this HTML:
<div id="article">
<div id="article-text">...</div>
<div id="slogan">Best Article Is Best</div>
</div>
How do I position #slogan always at top: 100 within #article?
I've tried setting absolute and relative position on #slogan and using top: 100 but if article text is bigger than 100px then #slogan will be pushed down.
Is there a way to position an element absolutely (or is it statically?) relative to its parent, no matter what content parent has?
#article{
position: relative;
}
#slogan{
position: absolute;
top: 100px;
}
This question already has answers here:
Is there anything wrong with positioning all elements relatively?
(5 answers)
Difference between static and relative positioning
(7 answers)
Closed 8 years ago.
Just like the title, why div (or p or any other elements in html) have 'position: static' as the default value? Why not 'position: relative'?
I don't see any benefit using 'position: static' in my css.
Is it safe to define all div elements in html using 'position: relative'?
EDIT:
I'm quite aware the difference between static, relative, absolute, and fixed positioning. But the main problem is why the default positioning for div or any other html elements is static? This example:
HTML
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div-last"></div>
</div>
</div>
</div>
CSS
.div1 {
width: 700px;
height: 700px;
background-color: #000;
position: relative;
}
.div2 {
width: 600px;
height: 600px;
background-color: #333;
position: relative;
top: 20px;
left: 20px;
}
.div3 {
width: 500px;
height: 500px;
background-color: #777;
position: absolute;
right: 0;
top: 30px;
}
.div-last {
width: 400px;
height: 400px;
background-color: #AAA;
position: absolute;
bottom: 20px;
left: 20px;
}
shows that I don't need a single static positioning to arrange my divs as I want.
Here's a jsfiddle of the code above.
And sorry for my potato English. :D
EDIT #2:
The answer from the related question is:
"Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body."
So, I don't want/need to "position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.", is there any other technical precautions that I need to know before I make all divs relative?
If position: relative was the default value, position: absolute; would no longer work as expected. That is, because position: absolute uses the closest non-static positioned element in the hierarchy as the reference. If there were no static positioned elements, all would be non-static, so position: absolute would use the parent element as the reference, and thus no longer positioning absolute, but relative to the parent element.
In this example:
html
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount"><p>Earth</p></div>
</div>
</div>
css
#inboxHeader{
background-color:yellow;
height :300px;
position: relative;
}
#inboxCount{
position: absolute;
bottom: 0;
float:right;
}
Earth is in the bottom left corner. So how can I shift it to the bottom right corner?
Set right:0 instead of float:right
http://jsfiddle.net/8np2f/4/
As it's an absolutely positioned element change float:right; for right: 0px;
If it was positioned relatively then you would need to float it to the right however absolute positioning removes the element from the flow of the DOM.
One caveat however, make sure the parent element has it's position set either to relative or absolute as required, or the child element could position itself against the highest in the DOM tree that has a position set.
float-ing has no effect on absolute-ly positioned elements. Set the right attribute instead.
So, change this:
#inboxCount{
position: absolute;
bottom: 0;
float:right;
}
To this:
#inboxCount{
position: absolute;
bottom: 0px;
right: 0px;
}
HTML
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount">
<p>Earth</p>
</div>
</div>
</div>
CSS
#inboxHeader {
background-color:yellow;
height :300px;
position: relative;
}
#inboxCount {
position: absolute;
bottom: 0;
right: 0; /* No need for float:right with absolute positioning */
}
I've update your Demo
You must add the rule right: 0 in the id inboxCount.
Here's an example: http://zip.net/brmZth
Hope this helps
Just posting a descriptive answer so it might help someone.
position property can be used to tackle this problem
<div id="outer" style="width: 400px; height: 400px; border: 1px solid red; position: relative">
<div id="inner" style="width: 200px; height: 200px; border: 2px solid yellow; right:0;bottom:0;position:absolute;">
</div>
jsfiddle to check a DEMO
If we set relative positioning on 'outer' div, any elements within 'outer' div will be positioned relative to 'outer' div. Then if we set absolute positioning on 'inner' div, we can move it to the bottom right of 'outer' div using 'right' and 'bottom' properties.
Relative :
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be.
Absolute : When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. And a type of positioning that allows you to literally place any page element exactly where you want it.
Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
References :
http://www.barelyfitz.com/screencast/html-training/css/positioning/
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/