What is the logic behind css positions?

Question

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!

This helps you about CSS Positions [Developer Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/position) [CSS Tricks](https://css-tricks.com/almanac/properties/p/position/) — , Aug 28 '20 at 08:47

score 2 · Answer 1 · answered Aug 28 '20 at 08:35

2

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

answered Aug 28 '20 at 08:35

Quentin

914,110
126
1,211
1,335

so how would I go about positioning child1 that has `position: relative;` within the parent? – Echo Aug 28 '20 at 08:46
Change it to `position: absolute` – Quentin Aug 28 '20 at 08:47

score 1 · Answer 2 · answered Aug 28 '20 at 08:57

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!

Thank you for your answer! I have a question, the grandchild of `.ex2`, what position is it? — Echo, Aug 28 '20 at 09:13
can you further expound the third example? when i set your third child's properties to `bottom: 0; left: 0;` it goes to the top left corner. shouldn't it be the bottom left corner? does positioning a relative inside a relative inverts the top and bottom? — Echo, Aug 28 '20 at 09:24
@Echo the grandchild of `.ex2` is in `position: static`, it's the default positioning for HTML element. — Geoffrey C., Dec 08 '20 at 11:58
@Echo the `position: relative` is a little bit hard to understand. It does "translate" the element from its natural positioning. When you do a top: 0; bottom: 0; to a relatively positioned element, you are just telling him not to move. — Geoffrey C., Dec 08 '20 at 12:00

score 0 · Answer 3 · answered Aug 28 '20 at 08:47

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

What is the logic behind css positions?

3 Answers3