1

I want to take an element outside of the normal HTML flow so that I can position it properly. So tried Absolute positioning, it positions the element according to its parent rules. Due to some height and width constraints, I'm not able to position it, at the most higher level so that it takes 100% of width and height, without affecting their parent's divs.

Example Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .Parent3 {
            width: 800px;
            height: 340px;
            background: blueviolet;
            position: relative;
        }

        .Parent2 {
            width: 600px;
            height: 300px;
            background: chocolate;
            position: absolute
        }

        .Parent1 {
            width: 400px;
            height: 260px;
            background: darkcyan;
        }

        .Parent0 {
            width: 200px;
            height: 220px;
            background: dimgray;
            position: absolute;
            right: 0px;
        }
    </style>
</head>

<body>
    <div Class="Parent3">
        <div Class="Parent2">
            <div Class="Parent1">
                <div class="Parent0">
                    <h1> The element needs to be positioned</h1>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Due to the absolute positioning, DIV 4 is ejected from the flow, and it can be a position anywhere inside the Parent1 DIV. but I want to position it by using the heights & widths of Parent3 DIV, without changing the position properties of their parents. Please help me or advised another way.

SEJ
  • 31
  • 6
  • 1
    did you mean to use `position: absolute;` ? because in your snipped you have `display: absolute;` Also add semicolons at the end of your styles. – Getter Jetter May 31 '21 at 22:38
  • yes, it's a mistake – SEJ May 31 '21 at 22:40
  • Elements that have `position:absolute` are positioned relative to the nearest ancestor with `position:relative` , add this to the appropriate ancestor element. See: https://css-tricks.com/almanac/properties/p/position/ – Jon P May 31 '21 at 22:41
  • Actually, I can't do this because it breaks the components hierarchy. – SEJ May 31 '21 at 22:44
  • Is it possible to define levels in the absolute positioning? – SEJ May 31 '21 at 22:49
  • That is the job of `position:relative`. There is more info in the article I linked to. Adding position relative to an ancestor shouldn't break anything based on the code provided. Can you provide a better example of the problem? Given your current code the element will be positioned realtive to the `body` as there are no ancestors with `position:relative` **NOT** *Parent1* – Jon P May 31 '21 at 22:50
  • 1
    @JonP: an element with `position: absolute` will be positioned relative to the first ancestor with its `position` set to any value other than (the default) `static`. – David Thomas May 31 '21 at 22:59
  • Please check the question again, an edit has been made. – SEJ May 31 '21 at 23:15
  • @DavidsaysreinstateMonica , well tickle my berries, you learn something new every day. That is a misunderstanding I have been carrying around for *many* years. Thanks for that. – Jon P May 31 '21 at 23:37
  • I’m voting to close this question because the OP has now changed the code (and with it the question) several times, which makes all comments and answers look wrong or senseless. – Johannes Jun 01 '21 at 09:34

1 Answers1

2

Absolutely positioned elements depend on the next higher relatively position element concerning their position (and also their size, if percentage values are used). So to achieve what you are asking for, add position: relative; to the Parent3 element.

.Parent3 {
  width: 800px;
  height: 340px;
  position: relative;
  background: blueviolet;
}

.Parent2 {
  width: 600px;
  height: 300px;
  background: chocolate;
}

.Parent1 {
  width: 400px;
  height: 260px;
  background: darkcyan;
}

.Parent0 {
  width: 200px;
  height: 220px;
  position: relative;
  background: dimgray;
  position: absolute;
  right: 0px;
}
<div Class="Parent3">
  <div Class="Parent2">
    <div Class="Parent1">
      <div class="Parent0">
        <h1> The element needs to be positioned</h1>
      </div>
    </div>
  </div>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • It *does* work. Previously your parent didn't have any height and no content, but with the new code in your question you can see it work, also in my edited answer now: The gray element aligns to the right border of the next higher relatively positioned element, `Parent3` (and at its top, since there is no `top` setting for it). – Johannes May 31 '21 at 23:22
  • Thanks for your answer, what if one of the parents like **parent 2** is already position to any value other than static, so according to the proposed solution, the element **parent 0** is positioned under the premises of **parent 2** rather than **parent 3**. I want to position it inside the **parent 3**. For more, please check the recently edited question. – SEJ Jun 01 '21 at 08:17
  • Editing the code in the question again and again will make all comments and answers look wrong and senseless - you shouldn't do that! Just open another question, but don't change the question all the time! – Johannes Jun 01 '21 at 09:33
  • Yes, you are right, it needs to be asked as a new question. – SEJ Jun 02 '21 at 16:38