Position:Fixed When Left/Top/Right/Bottom Aren't Specified - Desired Results in Ff/Ie, But Not in Safari

position:fixed when left/top/right/bottom aren't specified - desired results in FF/IE, but not in Safari

I believe the answer you're looking for is as follows...

The position of an element does not default to 0,0.
It's position is set by default relative to the containing element, therefor in your example, "#container-1" has a padding-left: 20px whereas the rest of the padding is set to 0 making the "default" position of the element 20px left of the wall of #container-1 and the top is 0px from the top of #container-1.

The default position of this element by default and my viewport not scrolled would be 63px from the top and the left is obviously dependent on the width of your browser. However, if you do not override the top and left, they are already defined by the rendering engine as the top:63px, left:893px.

Then on window resize, that position is adjusted to reflect the position based on the viewport so as you scroll down the position is changed to keep it fixed.

So, by simply adding "position:fixed;" your properties would (as far as the browser is concerned)
be as follows:

position:fixed;
top:63px; // defined by default during browser rendering in some browsers (based on scroll position on load)
left:893px; // defined by default during browser rendering in some browsers (based on scroll position / width of browser at time of load)

Also, IE6 and the likes, do not support position:fixed at all.
http://fiddle.jshell.net/uaE4g/4/show/

I hope this helps!

iPad, position:fixed, right:0;

Try using an absolute position on your element. Position fixed isn't supported I believe.

.element {
    position:absolute; 
    right:-200px; 
    width:300px; 
    background:red; 
    height:200px;
}

Containing block of an absolutely positioned element without top , right , bottom or left

For absolutely positioned elements, the default values for the offsets (top, left and so on) are auto.

In this case, the element remains in the position it would have it had position: static even though the content is taken out of the document flow.

References to the 'static position' concept include:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

http://www.w3.org/TR/CSS2/visuren.html#position-props

To quote:

10.3.7 Absolutely positioned, non-replaced elements

For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely:

The static-position containing block is the containing block of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none'.

CSS position:fixed inside a positioned element

You can use the position:fixed;, but without set left and top. Then you will push it to the right using margin-left, to position it in the right position you wish.

Check a demo here: http://jsbin.com/icili5

---

Related Topics