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

by

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!

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. Why can’t an element with a z-index value cover its child?
  3. How can I center an absolutely positioned element in a div?
  4. Fixed position but relative to container
  5. Why bottom:0 doesn’t work with position:sticky?
  6. Understanding z-index stacking order
  7. Difference between style = “position:absolute” and style = “position:relative”
  8. Make div stay at bottom of page’s content all the time even when there are scrollbars
  9. Why does applying a CSS-Filter on the parent break the child positioning?
  10. Center a position:fixed element
  11. My position: sticky element isn’t sticky when using flexbox
  12. How to make fixed header table inside scrollable div?
  13. What are `scrolling boxes`?
  14. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  15. What are the default top, left, botton or right values when position:absolute is used?
  16. Difference between static and relative positioning
  17. Set Google Maps Container DIV width and height 100%
  18. position: absolute without setting top/left/bottom/right?
  19. CSS: Top vs Margin-top
  20. pure CSS multiple stacked position sticky?
  21. CSS: display:inline-block and positioning:absolute
  22. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  23. Targeting position:sticky elements that are currently in a ‘stuck’ state
  24. Absolute positioning ignoring padding of parent
  25. object-fit, object-positioning and absolute positioning
  26. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  27. position relative in firefox [duplicate]
  28. Have a fixed position div that needs to scroll if content overflows
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment