I am integrating various third party web componenets, the major challenge I am getting is that if parent or greater parent element is relative positioned and overflow hidden is applied on it, and it has absolute positioned direct or indirect child, then that absolute positioned element get trimmed due to overflow hidden property.
I have created similar use case for you to apply and test.
Here is HTML Structure and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="relative-container">
<span class="long-text">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</span>
<div class="relative-menu">
<button onclick="toggleMenu()">
Open Menu
</button>
<div class="menu hide">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</div>
</div>
</div>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
if (menu) {
if (menu.classList.contains('show')) {
menu.classList.remove('show');
menu.classList.add('hide');
}
else {
menu.classList.remove('hide');
menu.classList.add('show');
}
}
}
</script>
</body>
</html>
Here is style.css
body{
padding: 25px;
}
.relative-container {
background-color: brown;
overflow: hidden;
position: relative;
color: white;
}
.relative-menu {
position: relative;
}
.long-text {
white-space: nowrap;
}
.menu {
position:absolute;
top:10px;
left:-30px;
background-color: green;
z-index: 99999;
}
.menu.hide {
display:none;
}
After keeping overflow:hidden on .relative-container output is
If we remove overflow:hidden, then menu is looking okay but horizontal scroll comes due to long text as shown:
Expected Output: Menu should be shown outside in bottom left only as shown in 2nd screenshot after removing overflow:hidden but horizontal scroll should not come. And Please NOTE: This is a sample example not actual use case. So you should assume that I cannot change CSS rule on .relative-container and .long-text class.