How to make an element fixed with respect to the parent?

Question

I have a container div who's content is quite large. The container is set to position: relative. The content has another div which I would like for it to be fixed with respect to the container horizontally--it should still scroll vertically.

When I set the div in question to:

position: absolute;
left: mypreferredleftpx;

I got weird results.

http://jsfiddle.net/Ey7vU/3/:

PRETTY PICTURE should scroll vertically, but not horizontally. It should remain fixed horiztontally with respect to the container.

Maybe your question is similar like this one: http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container — Willy Lazuardi, Dec 16 '13 at 17:17

score 0 · Answer 1 · answered Dec 16 '13 at 17:24

0

Remove

position:relative

from .container

Updated fiddle here.

answered Dec 16 '13 at 17:24

codingrose

15,563
11
39
58

To explain, you're seeing `content` move, not `.pretty_picture`, when `.container` has relative positioning. – isherwood Dec 16 '13 at 17:27
Hiral, I need the scroll to move pretty picture vertically, just not horizontally. – TheOne Dec 16 '13 at 17:51
@Hiral, the horizontal scroll should keep the "PRETTY PICTURE" at the same place. – TheOne Dec 16 '13 at 18:26

How to make an element fixed with respect to the parent?

http://jsfiddle.net/Ey7vU/3/:

1 Answers1