Css position absolute leaves white space at the top

Question

I want to absolute position a div but it is not sticked to the top but has a blank space. Container has position:relative and inner block has position:absolute css rules. I tried to play with the code and noticed that changing background-position has some effect and I have no idea why.

<header>
   <div class="header-wrapper">
      <div class="header-slogan-1 text-center">Base info</div>
   <div class="header-info">Info</div>
   </div>
</header>

What I want is to have the green block at the top (see fiddle).

Here is the fiddle

Please can anyone explain the behaviour and answer why the block is shifted from the top?

Ok, thanks for the answer. I suppose changing `margin-top` to `padding-top` of `.header-slogan-1` element will do the job. But behaviour of `position:relative` still remains tricky for me. — Andrey Putilov, Jan 27 '17 at 14:44
It is not completely clear to me why coordinate origin starts 88px below top border and background is shaded from the top. From my point of view it should correspond. If the wrapper is shifted it should be shaded accordingly. If not, it should start at 0px from the top and should not have margin. It's a bit tricky. But it's ok, I can close the question. — Andrey Putilov, Jan 27 '17 at 16:51
"From my point of view it should correspond." But clearly this is not how css works — Adam Wolski, Jan 29 '17 at 10:25

Adam Wolski · Accepted Answer · 2017-01-27T14:25:21.823

It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.

Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:

/* header block */
header {
    height: 536px;
    background-color: #ddd;
    background-position: center;
    background-size: 100% 536px;
    background-repeat: no-repeat;
    overflow: hidden;
}

header .header-wrapper {
    position: relative;
    overflow: auto;
    z-index: 2;
}

.header-slogan-1 {
    font-size: 32px;
    font-weight: 700;
    font-style: italic;
    margin-top: 88px;
}

.header-wrapper .header-info {
    position: absolute;
    top: 0;
    z-index: 3;
    background-color: #4caf50;
    max-width: 600px;
    padding: 25px 25px 25px 75px;
    color: #fff;
}

.text-center {
  text-align: center;
}

<header>
   <div class="header-wrapper">
      <div class="header-slogan-1 text-center">Base info</div>
       
       
   <div class="header-info">Info</div>
   </div>
</header>

But the wrapper does not have margin? I don't see it. `.header-slogan-1` has margin-top property but it`s not the wrapper. — Andrey Putilov, Jan 27 '17 at 14:21

score 0 · Answer 2 · answered Jan 27 '17 at 15:15

0

If I'm understanding this correctly, you want the header to have no space around it. If this is the case, then just add

body {
    margin: 0;
    padding: 0;
}

to the top of your css and you should be all set.

answered Jan 27 '17 at 15:15

jkd

126
8

score 0 · Answer 3 · answered Jan 27 '17 at 21:03

I changed margin-top: 88px; into padding-top: 88px; of header-slogan-1 as it does not change my layout. I have an image in wrapper class and it is centered and may exceed the container size, so I need position:relative and overflow:hidden.

Finally I decided to pick my solution. Sorry Adam for not choosing your answer.

Css position absolute leaves white space at the top

3 Answers3

Linked