Why is my position:absolute, bottom:0 css style place the div somewhere at the top?

Question

It was originally on a website I was working on, but this problem keeps happening. Basically, I would think .box1 would be at the bottom, having position: absolute, and bottom:0 as its style. But for some unknown reason, It moves to the top and appears to be at the header's bottom. Not the viewport's.

Codepen link as follows codepen link

And here are html and css for convenience.

.masthead {
  height: 100vh;
  min-height: 500px;
  background-color: white;
  border: 3px solid black;
}

.box1 {
  background-color: blue;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
}

<header class="masthead">
  <h1>This is an example.</h1>
</header>

<div class="box1">

</div>

<div>
  <p>
    Ask to be pet then attack owners hand cat not kitten around groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day
  </p>
  <p>
    n walls it smells like breakfast yet stand with legs in the litter box, but poop outside so scratch at door to be let outside, get let out then scratch at the door immediately after to be let back in swat at dog. Lie in the sink all day somehow manage
    to catch a bird but have no idea what to do next, so play with it until it dies of shock cough furball into the food bowl then scratch owner for a new one curl into a furry donut yet fart in owners foo
  </p>
</div>

score 1 · Answer 1 · answered Jan 20 '20 at 07:15

Use position relative on box1 class and now check my code all works fine in this .

.masthead {
            height: 100vh;
            min-height: 500px;
            background-color: white;
            border: 3px solid black;
        }
        
        .box1 {
            background-color: blue;
            width: 200px;
            height: 200px;
            position: relative;
            bottom: 0;
        }

<header class="masthead">
        <h1>This is an example.</h1>
    </header>
    <div class="box1"></div>
    <div>
        <p>Ask to be pet then attack owners hand cat not kitten around groom yourself 4 hours X-UA-Compatible checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day
        </p>
        <p>n walls it smells like breakfast yet stand with legs in litter box, but poop outside so scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in swat at dog. Lie in the sink all day somehow manage
            to catch a bird but have no idea what to do next, so play with it until it dies of shock cough furball into food bowl then scratch owner for a new one curl into a furry donut yet fart in owners foo</p>
    </div>

I'm sorry i didn't make my question clear. I was meant to have the box at the very bottom of the website, not relative. Hence why i used absolute. Ie, i wanted it to stick at the bottom. — Kevin, Jan 20 '20 at 07:18

score 0 · Answer 2 · answered Jan 20 '20 at 07:00

You need to remove bottom: 0 from your box1 class. When you write bottom: 0, it assumes to be zero from the view that is rendered. Your Header has a height of 100vh which is actually the full screen height. So, that's why it is appearing at the bottom of header.

score 0 · Accepted Answer · answered Jan 20 '20 at 07:06

0

You need to add following css

p {
   margin-bottom: 0;
}

body {
  position: relative;
}

As box1 is absolute positioned, you need relative parent from which you need to position the element which is your body

Now what happens in your case,

you have given 100vh to header and box1 div don't have any relative parent so it is positioned relative to screen/document

answered Jan 20 '20 at 07:06

Kiran Shinde

5,732
4
24
41

Fixed my issue, thank heaps! Although setting a 0 margin bottom for p is not necessary. But yes, setting a position relative to body fixed it. – Kevin Jan 20 '20 at 07:23

Arman Taherian · Answer 4 · 2020-01-20T07:30:46.180

It happened because that absolute will behave relative to its parent, and your box1 doesn't have any parent so it's assuming body as parent, and body by default has position: static and it causes that problem (because position: static won't work as parent of and absolute element), if you want to box1 sticks to the button of header, should put the box1 in the header and your masthead should have position: relative.

<header class="masthead">
  <h1>This is an example.</h1>

  <div class="box1">
  </div>
</header>

And:

.masthead {
  height: 100vh;
  min-height: 500px;
  background-color: white;
  border: 3px solid black;
  posotion: relative;
}

.box1 {
  background-color: blue;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 0;
}

score 0 · Answer 5 · answered Jan 20 '20 at 08:19

0

Please add this css property in your masthead class:

    .masthead {
       position: relative;
    }

answered Jan 20 '20 at 08:19

Mehadi Hassan

1,160
1
13
33

Why is my position:absolute, bottom:0 css style place the div somewhere at the top?

5 Answers5