position: fixed not positioning the element on top left of screen-CodePudding

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 >
  <div >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.

CodePudding user response：

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;
}

CodePudding user response：

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