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

Answer 1

 #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).

Answer 2

An element with position: fixed; is positioned relative to the screen's viewport , which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. When printing, the element will appear on every page.

Here's your code, I added background-color and height so we can see it. it is where it was expected to be.

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

 <div class="col-scroll-fixed"></div> 

Answer 3

On using

position: fixed

The element is positioned relative to the browser window. For an example:

.className{
    positon: fixed;
    top: 0;
    left: 0;
}

The above CSS will position the element to the top left most corner of the screen.

Here is a fiddle with your CSS example:

http://jsfiddle.net/244ju0ar/

Works totally fine. If you want "div" to be at the right most of the screen. You'll need to use

right: 0;

Else, if there is some other issue, let me know.