CSS position:fixed is not working?

Question

I used below code to position this element <div class="col-scroll-fixed"></div> on the right side of the screen. but it is not getting fixed to the screen. I even tried adding !important to each CSS property but couldn't get the result what I wanted.

.col-scroll-fixed{
    width: 310px;
    position: fixed;
    top:0;
    right: 30px;
    bottom: 0;
   z-index: 9999;
}

So, I want to know relative to what `position:fixed` will work. Is there anyone to help me to resolve this issue.

Note: Checked in chrome and firefox, Device: OSX

Solution

#outer {
  transform: scale(1.5);
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

#inner {
  position: fixed;
  top:0;
  right:0;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<div id="outer">
  <div id="inner">Inner</div>
</div>

Maybe it's because you set both the bottom and top properties to 0. That's not possible for the browser to follow. Either top or bottom must be set, but not both.

I've also noticed that position: fixed; does not always work when the element is inside another position: fixed; or position: absolute; element, at least in Chrome. So you should check the element's parents and make sure they are all relatively positioned.

Unfortunately, although I can reproduce this in a project I'm working on, I couldn't reproduce it in a snippet.

You'll also want to make sure that it doesn't have float applied to it or any flexbox parents, as these both also seem to override the fixed positioning behavior.

Also, remove any transform rules on it, or it's parents, as this seems to cause an issue in Chrome, Firefox, Opera, and Edge. The attached snippet demonstrates this issue.

Edit: Turns out this is intended behavior per the specs, but definitely will throw you off if you don't know about it. Really the important thing here is that it's likely that one of the element's parents forms a new stacking context, which causes it align to its parent instead of the window.

I logged this as an issue for Chrome, Firefox, Opera, and Edge (it works fine in IE).