Position Element Fixed Vertically, Absolute Horizontally

Position element fixed vertically, absolute horizontally

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.

Can i use position: fixed vertically and and position: absolute horizontally?

I believe the only way to achieve this is to use position: fixed; and calculate the value of left on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.

Position a Div Fixed Vertically and Absolute Horizontally within a Position:Relative Container Div

With JQuery, use the scrollLeft() property of the document! This would work

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});

css vertically centering a fixed positioning div

Alternatively, you could try this (only works if you know the height of the image):

#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}

How can I have vertically fixed div element?

Twitter uses a css property: position: fixed; which sure is the best way to go.

This does exactly what it says it does, it fixes the position. By using the top, right, bottom and left properties you can set the exact position of your div.

Edit 13-12-11 (awesome date!)

The property position: fixed; can not influence a positioning property over one axis only. This means, that you can not scroll left or right, like you want to.

I highly suggest you should either avoid surpassing the screen width, using percentages for your element's width. You can also just stick to your javascript.

You could however go for the method I suggested at first, but change the left property using a scroll event listener so that when you scroll, the left offset is increased or decreased. Because jQuery's bad-ass cross-browser support I'd go for jQuery. I think you can do practically the same with the prototype library, but I'm not familiar with that library.

jQuery (worked in google chrome):

var offset = 400; // left offset of the fixed div (without scrolling)

$(document).scroll(function(e) {
    // b is the fixed div
    $('.b').css({
        'left': offset - $(document).scrollLeft()
    });
});

Have a look at the live demo

You might need to change the document object to another object or selector of your choice.

css image fixed horizontally absolute vertically

Thanks for your help. I found the solution: This essentially will move the fixed div up (notice the negation sign in front of scrollVar) which will resemble an absolute scrollable behavoir.

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal >= 0) {
            $('#graphpaper').css({'position':'fixed','top' :-scrollVal});
        } 
    });
 });

Position Element Fixed Vertically, Absolute Horizontally