Why top:0 with position:absolute not working if another element has margin-top here?

Question

Why top:0 with position:absolute not working here?

I want to mention that in this condition I don't have control on any other element other than .heatmap

body {
  position: relative;
  margin: 0;
  padding: 0
}

.section1 {
  margin-top: 107px;
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

Can you define "not working"? It looks exactly as I'd expect it to. What do you expect to see? — Steve Hill, Apr 20 '17 at 08:47
becasue body is starting from the section1 .. beacuse of margin — Sahil Dhir, Apr 20 '17 at 08:47
@AndyHolmes — It already *has* position: relative on its parent. — Quentin, Apr 20 '17 at 08:58
I love how this question is being downvoted, all the while only a few answers appear to grasp what is really going on. I'd say that makes this a good question. Why is it being downvoted? — Decent Dabbler, Apr 20 '17 at 09:08
@DecentDabbler Thanks for understanding. and also my question is different than marked duplicate — Jitendra Vyas, Apr 20 '17 at 10:36

score 5 · Answer 1 · answered Apr 20 '17 at 08:57

5

You have encountered collapsing margins.

heatmap is positioned with respect to the nearest ancestor which has position that is not static. This is the body element.

The first child of the body has a margin-top.

That margin collapses through the top of the body and pushes the body element down away from the viewport edge.

You can see this by applying an outline to the body element.

body {
  position: relative;
  margin: 0;
  padding: 0;
  outline: solid pink 10px;
}

.section1 {
  margin-top: 107px;
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

To avoid this, prevent the margins from collapsing. This is most easily done by using padding on the body instead of margin on the heatmap.

body {
  position: relative;
  margin: 0;
  padding: 107px 0 0 0;
  outline: solid pink 10px;
}

.section1 {
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

answered Apr 20 '17 at 08:57

Quentin

914,110
126
1,211
1,335

I have no control on other elements in the page other than heatmap. I think i will have to use `fixed` instead `absolute` – Jitendra Vyas Apr 20 '17 at 08:58
@JitendraVyas — A hack which shouldn't have the side effects of `fixed` would be to set `top: -107px`. – Quentin Apr 20 '17 at 09:00
but I don't always know the value of margin. it can be different on different website. – Jitendra Vyas Apr 20 '17 at 09:01
and by the way what cons could be possible with `fixed`? – Jitendra Vyas Apr 20 '17 at 09:08
It permanently uses up a portion of the viewport. Links to specific parts of the page will result in the content being linked to being covered up by the fixed element. – Quentin Apr 20 '17 at 09:09
What I want is the nothing below `.heatmap` should be clickable in the presence of `.heatmap` – Jitendra Vyas Apr 20 '17 at 09:10

score 0 · Answer 2 · answered Apr 20 '17 at 08:47

0

You just remove position: relative from body, it will work

body {
  margin: 0;
  padding: 0
}

.section1 {
  margin-top: 107px;
  border: 1px solid green
}

.heatmap {
  z-index: 2147483642;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 1425px;
  height: 1110px;
  opacity: 0.7;
  background: red
}

<div class="section1">something</div>

<div class="heatmap">hamara heatmap</div>

answered Apr 20 '17 at 08:47

Super User

9,448
3
31
47

but I can't remove that – Jitendra Vyas Apr 20 '17 at 08:57
Although this appears to work, to me, this seems completely counter-intuitive. Is `` some special case, perhaps? I'd expect `.heatmap` to appear at the "absolute" top of the page, disregarding the `top-margin` of the body's first child. – Decent Dabbler Apr 20 '17 at 08:58
you can use `position: initial` instead of `relative` – Super User Apr 20 '17 at 08:59

score 0 · Answer 3 · answered Apr 20 '17 at 09:00

0

Just give padding-top: 1px; to body and it will work fine;

The problem was margin given to section1 which cause collapsing margin

See this link:

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

answered Apr 20 '17 at 09:00

Rakesh Soni

1,293
2
11
27

1

This does work but in this instance the OP can't control the `body` – Andy Holmes Apr 20 '17 at 09:08
1

i don't think you can achieve what you want without changing css for other elements like body etc. – Rakesh Soni Apr 20 '17 at 09:15
You can also use `body::before { content: ''; display: block; padding-top: 1px; }` – Rakesh Soni Apr 20 '17 at 09:18
1

Again, the OP can't control the `body` *only* `.heatmap`. Besides, `body:before` in some cases may already have a usage – Andy Holmes Apr 20 '17 at 09:25

Why top:0 with position:absolute not working if another element has margin-top here?

3 Answers3