I've been experimenting with the CSS property overflow-x: hidden on a container and noticed that it causes my element with position: absolute to disappear.
To see this effect in action, check out this demo: https://codepen.io/Karina1703/pen/LYMzqEj
Take a look at the code below:
.container {
overflow-x: hidden; /* Removing this line restores the element visibility */
}
.box {
position: relative;
width: 160px;
}
.button {
width: 100%;
background-color: blue;
}
.menu {
position: absolute;
width: 160px;
top: 20px;
width: 100%;
background-color: green;
}<body>
<div class="container">
<div class="box">
<button class="button">Button</button>
<nav class="menu">
<div>1</div>
<div>2</div>
</nav>
</div>
</div>
</body>