what is the default behaviour of CSS positioning absolute? [duplicate]-CodePudding

.red {
  background: red;
  width: 200px;
  height: 200px;
  margin: auto;
  position: absolute;
}
.blue {
  background: blue;
  width: 200px;
  height: 200px;
  margin: auto;
}
.green {
  background: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.parent {
  position: unset;
  background: pink;
  width: 70%;
  margin:auto;
}
.content_background {
  background: purple;
  position: absolute;
  width: 100%;
  height: 120px;
}
.content_heading {
  background: red;
  padding: 20px;
  height: 120px;
  max-width: 960px;
  margin: auto;
}

<!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>Home</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="parent">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="content">
        <div class="content_background">
          <div class="content_heading">
            <h2>My name Is Mohammed</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat
              facere expedita voluptas temporibus repellendus praesentium
              dolorem corrupti sequi quod modi.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

My question is :

Why the red div is poitioned to the parent div and not to the window?

this is weird for me becuase I thought if the parent is not positioned then the div with the absolute position will be poistioned to the window.

if no such positioned ancestor is found, the absolute positioned element will be positioned relative to the window.

is there any explanation of this behaviour?

CodePudding user response：

If you use top and left properties, you can see, it depends on the window. It is relative to window, but if you do not specify top left right or bottom it stays its own position.

.red {
  background: red;
  width: 200px;
  height: 200px;
  margin: auto;
  
  top: 0;
  left: 0;
  position: absolute;
}
.blue {
  background: blue;
  width: 200px;
  height: 200px;
  margin: auto;
}
.green {
  background: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.parent {
  position: unset;
  background: pink;
  width: 70%;
  margin:auto;
}
.content_background {
  background: purple;
  position: absolute;
  width: 100%;
  height: 120px;
}
.content_heading {
  background: red;
  padding: 20px;
  height: 120px;
  max-width: 960px;
  margin: auto;
}

<!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>Home</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="parent">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="content">
        <div class="content_background">
          <div class="content_heading">
            <h2>My name Is Mohammed</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat
              facere expedita voluptas temporibus repellendus praesentium
              dolorem corrupti sequi quod modi.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Edit: Check this, If you change your parent to position: relative it relative to parent instead of window. I also use right: 0 to see better to difference. It absolutely relative to the parent now.

.red {
  background: red;
  width: 200px;
  height: 200px;
  margin: auto;
  
  top: 0;
  right: 0;
  position: absolute;
}
.blue {
  background: blue;
  width: 200px;
  height: 200px;
  margin: auto;
}
.green {
  background: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.parent {
  position: relative;
  background: pink;
  width: 70%;
  margin:auto;
}
.content_background {
  background: purple;
  position: absolute;
  width: 100%;
  height: 120px;
}
.content_heading {
  background: red;
  padding: 20px;
  height: 120px;
  max-width: 960px;
  margin: auto;
}

<!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>Home</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="parent">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="content">
        <div class="content_background">
          <div class="content_heading">
            <h2>My name Is Mohammed</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat
              facere expedita voluptas temporibus repellendus praesentium
              dolorem corrupti sequi quod modi.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

You still have to tell the element where to be. Just setting position:absolute doesn't do that.

ABSOLUTE: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

MDN

CodePudding user response：

When working with absolute also specify the location to resolve this. include left:0 and top:0

in red add:

.red {
    top: 0;
    left: 0;
}