CSS overflow-y:visible, overflow-x:scroll

Question

I\'ve seen a few questions like this in my search, but either the question didn\'t get answered properly or no answer was given. So, I\'ll ask again.

Answer 1

It solved here! They use css and JS.

.child:hover .child-menu { display: block; }

 .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px  }
    .child { position:static; }
    .child-menu { position:absolute; display:inline-block; display: none; }

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/

Answer 2

I figured it out!

The parent should be overflow:auto; The .child should be position:relative; The .child-menu should be position:fixed; with NO top or left positioning. If you do this, it will keep it it inline with the content.

If you need to move the child-menu use margins and not top or left. Example margin-left:-100px;

EDIT

As it seems people still use this, please note that you will have to use javascript to move the fixed items as the page scrolls.

Answer 3

.parent { 
   overflow-y: auto; 
   width: 100px; 
}

.child-menu {
   display: block;
   position: fixed;
   top: auto;
   left: auto;
}