0

I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.

Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below

.container {
  position: fixed;
  // position in the center of screen
  left: 0;
  right: 0;
  top: 400px;
  margin-left: auto;
  margin-right: auto;
}

.child {
  position: fixed;
  left: 200px;
  top: 400px;
}
<div class="container">
  <div class="child">Test</div>
</div>

The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.

Ashutosh Shinde
  • 97
  • 1
  • 6
  • .child { position: fixed; left: 0; top: 0; } – kaann.gunerr Jan 23 '23 at 06:45
  • I’m confused about where you want the child to be as you have given it top:400px but say you want it top left of the screen. Also to make a correct snippet could you remove the CSS comment or give it correct /*…*/ – A Haworth Jan 23 '23 at 07:41
  • I don't want it at the top left of the screen. When I put it at (200, 400) it actually shows up at (200, 800). When I set left:0 top:0 it shows up at (0, 400) i.e the position of the parent. – Ashutosh Shinde Jan 23 '23 at 09:36

2 Answers2

0

left and top properties should have some units associated with it, e.g. pixels. Try the following:

.container {
    position: fixed;

    // position in the center of screen
    left: 0;
    right: 0;
    top: 400px;
    margin-left: auto;
    margin-right: auto;
}

.child {
    position: fixed;
    left: 200px;
    top: 400px;
}
sobercoder
  • 11
  • 3
0

Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.

Duplicate of this question

Ashutosh Shinde
  • 97
  • 1
  • 6