user3306403 user3306403 -5 years ago 116
HTML Question

PopUp does not appear below the button

I recently started with css flexbox design and stumbled over a problem.

I have two boxes in column direction. In the first column I have a button to open the popUp.
The popUp should

  • be opened right below the button

  • should overlay the second box

But I can only make one of those two things work and not both together.

Here is a fiddle.


<div class="container">
<div class="item">
<input type="button" id="toggle" value="pop up" onclick="togglePopUp()"/>
<div class="popup" id="pop" style="display: none">
<input type="button" id="toggle" class="close" value="close" onclick="togglePopUp()"/>
<div class="item">


function togglePopUp() {
if (document.getElementById('pop').style.display == "block") {
document.getElementById('pop').style.display = "none";
} else {
document.getElementById('pop').style.display = "block";


.popup {
background-color: #000;
width: 100px;
height: 100px;
position: absolute;
z-index: 10;

.close {
float: left;
color: red;

.container {
display: flex;
flex-direction: column;

.item {
overflow: scroll;
border: 3px solid #73AD21;

Thanks for your help.

Answer Source

Fastest way for me to do this would be to throw it in a wrapper with the following css:

  border:1px solid red;

Here's a demo of your work in action:


Further Explanation:

Apologies, but the key to the wrapper here is that I have the position for .popwrap set as static. This is essentially the 'default' (also known as initial) value for position.

In order for z-index to be correctly applied in an expected manner to an element, you need a position applied to that element. It's how the browser comes up with the various layers to elements on a page.

That's not the only thing at play, here. You're also looking to have a child 'popup' element not disturb the flow or positioning of any other elements around it. The popup element you have needs to be set to 'absolute'.

For further reading on the stacking context and the factors at play in your example, I invite you to visit these links:

I've been awake for about 36 hours at this point, (long project) but if this explanation wasn't clear, I'd be happy to give it another stab after I sleep.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download