Let's say I have a container, and that I want to put this one container into yet another container that's also full of other stuff. The CSS code might look something like this:
.parent-container {
width: 100%;
position: relative;
}
.child-container {
width: 600px;
position: absolute;
left: 25px;
bottom: 100px;
}
However, .child-container also includes absolutely positioned elements, which are position relatively to .parent-container because .child-container doesn't have position: relative. So my question is, how can I position .child-container's children relatively to itself, while still keeping it correctly positioned in .parent-container?
P. S. Wrapping .child-container in a position: absolute'd div and making .child-container position: relative should do the trick, but I was hoping for something more... semantic.
However, .child-container also includes absolutely positioned elements, which are position relatively to .parent-container because .child-container doesn't have position: relative.
Incorrect. Absolute positioning is with respect to the nearest ancestor that is positioned, not position: relative. Anything except position: static will make an element positioned. (position: relative won't move the container out of normal flow so it is used when you want to set a positioning context with no side effects).
Since the parent is position: absolute; they are positioned with respect to that already.
You don't need to change .child-container position to relative in order to set him has "relative" parent.
please review this link from MDN about position absolute.
"The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used."
*positioned ancestor is an element with either: relative, fixed or absolute position
Absolutely positioned elements should already be relative to their parent. Here's a demo which shows nested items within absolute positioning
HTML
<div class='parent-container'>
Parent
<div class='child-container'>
1st Child
<div class='grandchild-container'>
2nd Child
</div>
</div>
</div>
CSS (color added to illustrate differences)
.parent-container {
position: relative;
background: grey;
}
.child-container {
position: absolute;
background: red;
left: 20px;
}
.grandchild-container {
position: absolute;
background: yellow;
left: 20px;
}
jsFiddle
It will look like this
*Notice each position is relative to its parent.
For more info see:
Positioning - w3schools
Position - Mozilla Developer Network
Related
figma.com
I'm trying to create a website similar to the prototype given in Figma (linked above). This is the code I used:
<div class="Tips" id="Tips">
<div id="TipsHeading"> Tips
</div>
<div class="rec2">
<img id="img1" src="personal.png">
<div id="WearMask"> Wear Mask </div>
</div>
CSS:
.Tips{background: #FFFFFF;
top: 1024px;}
#TipsHeading{position: absolute;
height: 66px;
top: 1053px;}
.rec2{position: absolute;
height: 369px;
top: 1192px;}
#WearMask{position: absolute;
top: 160px;}
#img1{position: absolute;
left: 24.85%;
right: 26.5%;
top: 49.36%;
bottom: 10.7%;
height: 278px;
width: 338px;}
I'm using the id property for both "TipsHeading" and "WearMask". However TipsHeading is position wrt the top of the page, and WearMask is positioned wrt to .rec2. It doesn't make sense to me.
This has happened multiple times and it's becoming very difficult for me to debug my code, please help.
Here is what Mozilla developers says about position absolute:
The element is removed from the normal document flow, and no space is created >for the element in the page layout. It is positioned relative to its closest >positioned ancestor, if any; otherwise, it is placed relative to the initial >containing block.
position: absolute also reinitialises the position of its children like position: relative does.
In your case, TipsHeadingis positioned based on its closest positioned ancestor .Tips, whereas #WearMask is positioned based on the position of its ancestor .rec2
That being said, giving all your elements an absolute positioning will create a lot of mess in your css. Try to work with relative elements while using flex,margin and padding instead.
The element in position: absolute is positioned relative to its first positioned ancestor element.
So I have a parent element with a child element and the child element is the parent element of a child element like this:
<div class="father">
<div class="child">
<div class="child-of-child"></div>
</div>
</div>
And CSS like this:
.father{
position: relative;
}
.child{
position: absolute;
}
.child-of-child{
position: absolute;
}
But I want the div named child to be position: absolute; to the father like it is now, and I also want it to be position: relative; to the div named child-of-child so that I can move the child-of-child inside child
Provided that the .child is absolutely positioned, any .child-of-child can be absolutely positioned in relation to the .child. This means that the .child does not need to be given position: relative for the .child-of-child to be absolutely positioned with respect to it.
You can confidently use your CSS.
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 trying to understand the difference between relative and absolute positions in CSS. I've read the explanations and definitions of both absolute and relative, yet I still find a particular example rather strange. Can someone explain why in the following example :
Here's the HTML file :
body {
display: block;
}
.d1 {
margin-top: 100px;
position: relative;
width: 100px;
height: 100px;
background: #815BFF;
}
.d2 {
position: absolute;
margin-left: 100px;
width: 100px;
height: 100px;
background: #815BFF;
}
.d3 {
position: absolute;
margin-top: 100px;
margin-left: 200px;
width: 100px;
height: 100px;
background: #815BFF;
}
<body>
<div class="d1">div 1</div>
<div class="d2">div 2</div>
<div class="d3">div 3</div>
</body>
I've posted the example on http://codepen.io/l7uci/pen/JWNrRj.
If I change the position of any div from absolute to relative, why does the div itself not change, but all the divs that come after it take it as a reference and change according to it ? I was expecting the other divs to still be placed relative to the body, as in Difference between relative and absolute .
If you use position:absolute but don't set top, left, bottom or right, the element takes the position it would have had in normal flow, even though it is not itself in normal flow, so doesn't affect the position of subsequent elements.
So if you change an element without top, left, bottom or right from absolute to relative it doesn't move, this is it still takes it's place in normal flow, but it is now in normal flow, so subsequent elements will move to take account of its size.
-An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
-An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I need to make #outer1 to be fixed at the top of screen, but I cannot do it without messing up the current positions. I cannot just make #outer1 fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned. What should I do instead to make #outer1 to be fixed at the top of the screen?
div {
border: 1px solid black;
}
#outer1 {
height: 100px;
position: relative;
}
#outer2 {
height: 900px;
}
#left {
display: inline-block;
}
#right {
display: inline-block;
position: absolute;
right: 0;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>
I cannot just make #outer fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned.
Simply because the most common arrangement for absolutely positioned children involves a relatively positioned parent, doesn't mean that's the only way.
The rule for absolutely positioned elements is that their containing block is the nearest positioned ancestor. #outer1 with position fixed is a positioned ancestor, so it qualifies. It's just that 99% of the time people use position: relative since that has minimal impact on the parent.
There's no problem using position: fixed as a containing block for absolutely positioned children.
From MDN:
A positioned element is an element whose computed position
property is either relative, absolute, fixed or sticky. (In other words, anything other than static)
A relatively positioned element is an element whose computed
position property is relative.
An absolutely positioned element is an element whose computed
position property is absolute or fixed.
A stickily positioned element is an element whose computed
position property is sticky.
The top, right, bottom, and left properties specify the
position of positioned elements.
The absolutely positioned element is positioned relative to nearest
positioned ancestor (non static). If a positioned ancestor doesn't
exist, the initial container is used.
source:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
You can still have absolutely positioned child elements in a div with fixed position, it doesn't have to be specifically relative, it just can't be static, the default value for position
body {
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
}
#outer1 {
height: 100px;
position: fixed;
width: 100%;
}
#outer2 {
height: 900px;
}
#left {
display: inline-block;
}
#right {
display: inline-block;
position: absolute;
right: 0;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>