ipkiss ipkiss - 2 months ago 10
CSS Question

Positioned child won't display due to parent's overflow setting

Since the

parent
has
overflow-y
(which is a must in my real project) the
menu-item
will not display when hovering.

Is there any workaround so that the
parent
still has
overflow
settings and the
menu-item
will display when hovering as in my code?



#parent {
height: 100px;
width: 100px;
margin: 10px auto;
background-color: antiquewhite;
right: 0;
top: 0;
overflow-y: auto;
list-style: none;
padding: 0;
}
.menu-item {
position: relative;
}
.menu-item:hover #popup {
display: block;
}
#popup {
position: absolute;
top: 0;
right: 108%;
border: 1px solid red;
background: red;
color: #fff;
display: none;
}

<ul id="parent">
<li class='menu-item'>
Menu Title 1
<div id="popup">
<p>Popup data</p>
</div>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>





http://codepen.io/anon/pen/BLRBLk

Answer

The absolutely positioned pop-up is confined to the bounds of the nearest positioned ancestor. In this case, that's the .menu-item list item, which has position: relative.

This list item is a child of the ul with id parent, which has the overflow-y: auto rule that hides the pop-up.

One workaround is to remove position: relative from .menu-item.

This releases the pop-up from the confines of the ul and, with no other positioned ancestors, makes it relative to the initial containing block (and no longer subject to the parent's overflow rule).

#parent {
  height: 100px;
  width: 100px;
  margin: 10px auto;
  background-color: antiquewhite;
  right: 0;
  top: 0;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.menu-item {
  /* position: relative; */
}
.menu-item:hover #popup {
  display: block;
}
#popup {
  position: absolute;
  /* right: 108%; */
  border: 1px solid red;
  background: red;
  color: #fff;
  display: none;
  top: 10px;
  left: 50%;
  transform: translateX(-200%);
}
<ul id="parent">
  <li class='menu-item'>
    Menu Title 1
    <div id="popup">
      <p>Popup data</p>
    </div>
  </li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
</ul>