Position element fixed vertically, absolute horizontally

by

Position Fixed Element Horizontally Based Off Another Element

(Disclaimer Note: The solution offered here is not technically “absolute horizontally” as the question title stated, but did achieve what the OP originally wanted, the fixed position element to be ‘X’ distance from the right edge of another but fixed in its vertical scroll.)

I love these types of css challenges. As a proof of concept, yes, you can get what you desire. You may have to tweak some things for your needs, but here is some sample html and css that passed FireFox, IE8 and IE7 (IE6, of course, does not have position: fixed).

HTML:

<body>
  <div class="inflow">
    <div class="positioner"><!-- may not be needed: see notes below-->
      <div class="fixed"></div>
    </div>
  </div>
</body>

CSS (borders and all dimensions for demonstration):

div.inflow {
  width: 200px; 
  height: 1000px; 
  border: 1px solid blue; 
  float: right; 
  position: relative; 
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
  width: 80px; 
  border: 1px solid red; 
  height: 100px; 
  position: fixed; 
  top: 60px; 
  margin-left: 15px;
}

The key is to not set the left or right at all for the horizontal on the div.fixed but use the two wrapper divs to set the horizontal position. The div.positioner is not needed if the div.inflow is a fixed width, as the left margin of the div.fixed can be set to known width of the container. However, if you desire than container to have a percentage width, then you will need the div.positioner to push the div.fixed to the right side of the div.inflow first.

Edit: As an interesting side note, when I set overflow: hidden (should one need to do that) on the div.inflow had no effect on the fixed position div being outside the other’s boundaries. Apparently the fixed position is enough to take it out of the containing div’s context for overflow.

More Related Contents:

  1. Fixed position but relative to container
  2. Fixed element disappears in Chrome
  3. Float right and position absolute doesn’t work together
  4. Set position absolute and margin
  5. Hide scrollable content behind transparent fixed position divs when scrolling the page?
  6. Working with CSS in React [closed]
  7. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  8. Hiding the scroll bar on an HTML page
  9. CSS3 background image transition
  10. Is there a CSS selector by class prefix?
  11. Position Relative vs Absolute?
  12. Why does the order of media queries matter in CSS?
  13. Truncating long strings with CSS: feasible yet?
  14. Remove padding from columns in Bootstrap 3
  15. Why does `overflow:hidden` prevent `position:sticky` from working?
  16. Style disabled button with CSS
  17. What’s the difference between `all: unset` and `all: revert’
  18. Slanted Corner on CSS box
  19. How to specify an element after which to wrap in css flexbox? [duplicate]
  20. How to link a CSS file from HTML file?
  21. Build list of selectors with LESS
  22. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  23. how to rotate text left 90 degree and cell size is adjusted according to text in html
  24. CSS fill remaining width
  25. Set div height equal to screen size
  26. What CSS3 features still need vendor prefixes?
  27. How to fix unexpected column order in bootstrap 4?
  28. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  29. CSS: Left, Center, & Right Align Text on Same Line
  30. minmax fails (invalid property value)

Leave a Comment