CODEWITHSUNDEEP
htmlcss
Moritz S.
Moritz S.

Reputation: 3

beginner question on flexbox with absolute content

i have a probably rather easy question. I gave my body a background gradient and set it as a flexbox. I can give my 2 text elements the position absolute and everything works fine. But as soon as i give my box (which should have the same relation to the body as the text elements) an absolute position, my background gradient disappears. With a relative positioning that doesnt happen. I know i can work with relative here as well, but I just want to know why this happens to my background gradient. Hope sb can help,

Thanks

body {
  margin: 0;
  height: 100%;
  background-image: linear-gradient(
    to right,
      rgb(69, 174, 201),
      rgb(169, 248, 253)
  );
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

h2 {
  text-align: center;
  font-size: 40px;
  width: 100%;
  position: absolute;
}

.poben {
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.2em;
  width: 100%;
  position: absolute;
  top: 60px;
}

.center-box {
  /* if I change the position below to absolute, the page gets white */
  position: relative;
  height: 800px;
  width: 200px;
  background: linear-gradient(rgb(17, 17, 53), rgb(62, 55, 102));
  border-radius: 2%;
  box-shadow: 10px 10px 10px hsl(284, 100%, 9%);
}
<h2>Test survey form</h2>
<p class="poben">Thanks for talking part in this survey!</p>
<div class="center-box">

</div>

Upvotes: 0

Views: 58

Answers (1)

Chipsy
Chipsy

Reputation: 176

Position: Absolute; when you use this it basically removes the element from the flow of the document. It behaves like it's not present there. You can use left/right/top/bottom properties to move the element anywhere you want.

Position: Relative; when you use this, it basically keeps the element in the flow of the document. You can use left/right/top/bottom properties to move the element relative to its parent container.

In your code, the body is the parent container.

When you give the child elements of this container as position: absolute; it basically moves them out of that body container.

Now body thinks there is no child inside me and its height is now 0 i.e no content no value. You inspect that in the Chrome Inspector and check the box model to understand it.

 body {
margin: 0;
padding: 1px; /* Filling the body with some content */
height: 100%; 
background-image: linear-gradient(
to right,
rgb(69, 174, 201),
rgb(169, 248, 253)
);
display: flex;
justify-content: center;
flex-wrap: wrap;
}

h2 {
text-align: center;
font-size: 40px;
width: 100%;
position: absolute;
}

.poben {
text-align: center;
font-size: 20px;
letter-spacing: 0.2em;
width: 100%;
position: absolute;
top: 60px;
}

.center-box {
/* if I change the position below to absolute, the page gets white */
position: absolute;
height: 800px;
width: 200px;
background: linear-gradient(rgb(17, 17, 53), rgb(62, 55, 102));
border-radius: 2%;
box-shadow: 10px 10px 10px hsl(284, 100%, 9%);
}
        <h2>Test survey form</h2>
<p class="poben">Thanks for talking part in this survey!</p>
<div class="center-box">

This might help - https://css-tricks.com/almanac/properties/p/position/

Upvotes: 1

Related Questions