Menu
Here's what I'm trying to accomplish:
I need a button which is positioned a certain distance from the right side of a div, and is always that same distance from the side of the div no matter the size of the viewport, but will scroll with the window.
So it is x pixels from the right side of the div at all times, but y pixels from the top of the view port at all times.
Is this possible?
907
Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.
To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element. This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.
An element with position: fixed; is positioned relative to the 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. A fixed element does not leave a gap in the page where it would normally have been located.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
(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.
116
After much digging (including this post) I couldn't find a solution that I liked. The Accepted Answer here doesn't do what the OP's title read, and the best solutions I could find admittedly resulted in jumpy elements. Then, it hit me: Have the element be "fixed", detect when a horizontal scroll occurs, and switch it to be absolutely positioned. Here is the resulting code:
View it as a Code Pen.
HTML
<div class="blue"> <div class="red"> </div> </div> CSS
/* Styling */ .blue, .red { border-style: dashed; border-width: 2px; padding: 2px; margin-bottom: 2px; } /* This will be out "vertical-fixed" element */ .red { border-color: red; height: 120px; position: fixed; width: 500px; } /* Container so we can see when we scroll */ .blue { border-color: blue; width: 50%; display: inline-block; height: 800px; } JavaScript
$(function () { var $document = $(document), left = 0, scrollTimer = 0; // Detect horizontal scroll start and stop. $document.on("scroll", function () { var docLeft = $document.scrollLeft(); if(left !== docLeft) { var self = this, args = arguments; if(!scrollTimer) { // We've not yet (re)started the timer: It's the beginning of scrolling. startHScroll.apply(self, args); } window.clearTimeout(scrollTimer); scrollTimer = window.setTimeout(function () { scrollTimer = 0; // Our timer was never stopped: We've finished scrolling. stopHScroll.apply(self, args); }, 100); left = docLeft; } }); // Horizontal scroll started - Make div's absolutely positioned. function startHScroll () { console.log("Scroll Start"); $(".red") // Clear out any left-positioning set by stopHScroll. .css("left","") .each(function () { var $this = $(this), pos = $this.offset(); // Preserve our current vertical position... $this.css("top", pos.top) }) // ...before making it absolutely positioned. .css("position", "absolute"); } // Horizontal scroll stopped - Make div's float again. function stopHScroll () { var leftScroll = $(window).scrollLeft(); console.log("Scroll Stop"); $(".red") // Clear out any top-positioning set by startHScroll. .css("top","") .each(function () { var $this = $(this), pos = $this.position(); // Preserve our current horizontal position, munus the scroll position... $this.css("left", pos.left-leftScroll); }) // ...before making it fixed positioned. .css("position", "fixed"); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
