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

问题

I have some text at the bottom of my page saying Built By Me in it. I have this in a fixed position 35px away from the bottom and left of the window so it moves as you scroll. What i actually want is to fix it vertically, so it moves as you scroll up and down and is always 35px away from the bottom of the window, but have it positioned 35px away from the left edge of the page (not screen) so it does not move when you scroll horizontally.I checked out this solution Position element fixed vertically, absolute horizontally but it does not seem to work for me unfortunately. FYI i am currently using the following code to fix it top and bottom which works fine (but also moves when you scroll horizontally):

#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}

*html #sticky {
position: absolute;
bottom: 0px;
}

<div id="sticky">
Built by Me
</div>

Thanks so much for any pointers you could give as i can't for the life of me work out how to fix it on only one axis?

Dave

回答1:

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.

回答2:

Keep the fixed div.

And have the following javascript code which will take care of horizontal moving.

$(window).scroll(function(){
  $('.fixed_div').css('left',-$(window).scrollLeft());
});

来源：https://stackoverflow.com/questions/4819828/can-i-use-position-fixed-vertically-and-and-position-absolute-horizontally