Geek Answers Handbook

Absolute positioning and scrollable DIV

I have this complicated CSS problem: I have this HTML:

<div id="wrapper"> <div class="left"></div> <div id="scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat. </div> <div class="right"></div> </div>

Using this CSS:

 #wrapper { position: relative; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; height: 47px; } #scroll { position: relative; height: 100%; width: 10000px; } div.left, div.right { position: absolute; display: block; background-color: rgba(255, 0, 0, 0.5); width: 24px; height: 100%; z-index: 100; top: 0; } div.left { left: 0; } div.right { right: 0; }

And the visual result is as follows: enter image description here

For some reason, div.right moves when I scroll through #scroll . I want him to always swim on the border of #wrapper .

This is what I am getting right now: enter image description here

Here is jsfiddle: http://jsfiddle.net/b5fYH/

thanks

Edit

Just because it was not obvious, it should work on mobile devices.

+4
source share
2 answers

You should know the difference between position: absolute and position: fixed .

The first means: place the element in an absolute position within the relative element and store it in this place (relative).

Second: put the element in the absolute position in the window (frame) and save it there, no matter what happens.

Check out this script: http://jsfiddle.net/b5fYH/1/

+5
source

The problem is how overflow-x changes the width of the wrapper div.

The solution I found was:

Demo: http://jsfiddle.net/5jWpG/

  • wrapping the entire object with a new div with the container id container

  • then adding the following CSS code:

     #wrapper-container { position: relative; } #wrapper { position: static; /* or remove position relative from your code */ } div.left, div.right { bottom: 16px; height: auto; /* or remove height: 100% from your code */ }
+3
source

More articles:


All Articles