Position Absolute But Relative to Parent

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 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/

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 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>

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.)

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

css - parent's position is absolute and child's position is relative and vice versa

Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.

position: absolute will position that element to its nearest parent with a position other than static. Static is the default for everything.

position: relative is a little weird because it really affects that element's children, not its own position. It's just saying to its child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but its children might.

So consider a situation like this:

<div class="parent">
     <div class="child">
           <div class="grandchild"></div>
     </div>
</div>

If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.

If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.

However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.

In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.

And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.

Position Absolute But Relative to Parent