Absolute Positioning and Its Parent Element

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



Leave a reply



Submit