Position absolute but relative to parent
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute
means something like "use top
, right
, bottom
, left
to position yourself in relation to the nearest ancestor who has position: absolute
or position: relative
."
So we make #father
have position: relative
, and the children have position: absolute
, then use top
and bottom
to position the children.
CSS Position Absolute With Respect to a Parent Element Acting as Relative
An absolute positioned element is positioned relative to the first parent element that has a position other than static. Since you have it inside a parent with relative
it will be absolutely positioned relative to this parent.
You might be looking for fixed
position, which is relative to browser window.
Absolute positioning and its parent element
It falls back to the nearest ancestor element that has position defined as relative
, absolute
, or fixed
-- not just relative
, but any value other than static
(the default).
Generally, you'd want to position the item absolutely according to a grid established by its parent. However, sometimes it makes sense to have it positioned to a grid established by a higher up element.
For example:
HTML
<body>
<div id="div1">
<div id="div2-A">[some content]</div>
<div id="div2-B">
<div id="div3">[more content]</div>
</div>
</div>
</div>
CSS
#div1{
width:1024px;margin:auto;
position:relative
}
#div3{
position:absolute;
bottom:0px; left:0px;
}
In this case, div3 will be positioned all the way to the left & bottom of div1 -- its grandfather -- because its immediate parent (div2) has the default position:static
, and so does not establish as an absolute positioning context/grid for its children. But div3 will not (necessarily) go all the way to the left of the viewport or the page body because the next higher up element (div1) has position defined as relative.
UPDATE
In the case you provided (http://purecssmenu.com/), the position:relative declaration is being applied on the :hover pseudo-class, so you won't see it immediately in the styles listed for Google Developer Tools or Firebug.
You can inspect this in Google developer tools by inspecting the parent element, then in the right-hand side of the "Styles" panel, click the "Toggle Element State" button, (looks like a box with dotted border and an arrow pointing in it), then check the box next to ":hover". I'm sure Firebug has something similar.
You'll see this declaration added to the list:
ul.cssMenu li:hover { position: relative; }
This works because when you're not hovering on the parent <li>
, the sub-menu <ul>
is hidden with display:none
, so it doesn't matter where it's positioned.
Absolute Positioning to parent div
position absolute:
It will position itself according to the closest positioned ancestor.
In your case, you don't have any positioned ancestor, so your absolute elements will position to the viewport.
You have to give your ancestors a position different from static. I suggest using relative
in this case since it respects the flow of the page.
You have to add this in your CSS:
.div_1{
height:70vh;
border:1px solid blue;
margin:20px;
position: relative; // now this element is considered a positioned element.
}
.sub_div{
height:40vh;
border:1px solid green;
margin:20px;
position: relative;
}
You can read more about how position affects your elements at: https://cssreference.io/positioning/
CSS: placing absolute positioned element so that it touches its parent from outside
Sure there is! There is just 1 line missing in your code.
You just need to use right:100% and it will be just fine.
.parent { background: #aaffaa; width: 200px; height: 200px; margin-left: 150px; display: flex; align-items: center; position: relative;}
.child { background: #ffaaaa; width: 100px; height: 100px; position: absolute; right: 100%;}
<div class="parent"> <div class="child"></div> </div>
CSS absolute positioning with respect to its parent div
To do absolute positioning based on the parent, the parent must be positioned using relative.
.popup {
position: relative;
}
. close-button {
position: absolute;
top: -0.5em;
right: -0.5em;
z-index: 10;
}
CSS absolute position and not relative to its absolute parent div
You could use animation in opposite direction for the child element and this will make child element look like its static in one position.
.parent { position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background-color: blue; overflow: hidden; animation: move 2s infinite;}
.child { position: absolute; top: 5px; left: 5px; width: 50px; height: 50px; background-color: purple; animation: moveBack 2s infinite; z-index: 2;}
@keyframes move { 50% { transform: translateX(25px); }}
@keyframes moveBack { 50% { transform: translateX(-25px); }}
<div class="parent"> <div class="child"></div></div>
Absolute position as per parent's parent
If you have made .div-3 position:absolute
, it will be with respect to the parent div which in div-2 in your case. It will get aligned to the top-left corner of it. If you want to make it relative to div-1 try this:
<div class="div-1">
<div class="div-2">
<span class="wrapper">test</span>
</div>
<div class="div-3">
</div>
</div>
This will make it with relative to div-1. For further understanding of positioning you can go to this link
CSS: Positioning a child element relative to its parent using any position property on the parent
The question is:
Could I also achieve this [positioning the p element at the bottom] by using any position declaration(other than
static) for the parent?
Yes
From MDN:
A positioned element is an element whose computed position value is
either relative, absolute, fixed, or sticky. (In other words, it's
anything except static.)
Related Topics
Fixed Menu on Left and Content Scrollable
What Does "A" Stand for in Font: 0/0 A;
Cypress Testing Pseudo CSS Class :Before
Css: Circle with Four Colors and Only One Div
Firefox Support for Alignment-Baseline Property
How to Float Paragraph Next to Image Without Wrapping the Image
Can Reactjs Programmatically Handle :Before
Make Table Header Fixed When Scrolling
Why Is My Android Device-Width 980Px
What Does an * (Star) Mean in Front of a CSS Declaration
Imitate Photoshop Blend Effects Like Multiply, Overlay etc
CSS 100 Percent Height Body and Element
Sass: Change Color with @For Loop
Remove the Material Stepper Header