css - Overflow-y on scrolling div clipping nested div -
i have div scrolls horizontally hooked buttons jquery. working fine, problem have nested div in scrollable content becomes clipped overlaps container. need overflow on x axis not on y. overflow-x: hidden, overflow-y visible should solve this, doesn't. work if remove overflow, need overflow-x scroll div.
simplified html / css below - without scrolling logic not problematic here.. should easy?
thanks million :) andy
<!doctype html> <html> <head> <title>testdiv</title> </head> <body> <div style="width:100%; height:150px; border:1px solid blue"> top div </div> <div class="slide" style="height:150px; width:800px; border: 1px solid blue; background-color: pink;"> <div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider"> <table cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px"> <tr><td>aaaaaaaaa</td><td>bbbbbbbbb</td><td><div class="container"><div class="testdiv">xxx</div></div>ccccccccc</td><td>dddddddddd</td><td>eeeeeeeeee</td><td>fffffffff</td><td>gggggggggg</td><td>gggggggggg</td><td>gggggggggg</td><td>gggggggggg</td><td>gggggggggg</td><td>gggggggggg</td><td>gggggggggg</td><td>gggggggggg</td></tr> </table> </div> </div> <div style="width:100%; height:150px; border:1px solid green;"> bottom </div> </body> </html> <style scoped="scoped"> .slide { position:relative; overflow-x: hidden; overflow-y:visible; } .slide .inner { overflow-y:visible; position:absolute; left:0; bottom:0; padding:0px; } .container { width: 20px; height: 20px; background-color: black; position: relative; } .testdiv { width: 235px; position: absolute; z-index: 999; left:20px; top: -180px; height: 200px; background-color: greenyellow; } </style>
the issue using "fixed" positioning. work "relative" positioning. convert relative positioning, need remember top location relative previous sibling element, whereas left relative parent element.
Comments
Post a Comment