I have a div
with absolute
position; it is a menu which display
property toggles on a click action. Which has an ancestor div
; by clicking in this ancestor div
the menu toggles and the menu appears near to the ancestor. The position of it's appearance is fine for me. So far so good but as soon as I scroll a bit and click on the ancestor div
the menu appears to its old position so the alignment is not longer maintained. How can I fix this.
let isVisible = false;
document.getElementById("r3").addEventListener('click', function(){
let menuEle = document.getElementById("menu");
if(!isVisible){
menuEle.classList.add("show");
}
else{
menuEle.classList.remove("show");
}
isVisible = !isVisible;
})
html{
box-sizing: border-box;
}
body{
padding: 0px;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.layout{
height: 150px;
width: 100%;
border: solid 1px #000;
overflow-y: auto;
overflow-x: hidden;
}
.row{
height:50px;
width: 100%;
border: solid 1px #a5a5a5;
cursor: pointer;
color: red;
}
.row:hover{
background: #c9dcff;
}
.menu{
display:none;
justify-content: center;
align-items: center;
position: absolute;
width: fit-content;
background: #e7e7e7;
padding: 0.8em;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.menu.show{
display: flex;
}
b{
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="layout">
<div class="row"></div>
<div class="row"></div>
<div class="row" id="r3">
<div class="menu" id="menu">
<span>Menu of r3</span>
</div>
r3: First click here to see the menu and click again to hide, then scroll a bit above and click again
</div>
<div class="row"></div>
</div>
</body>
</html>
You omitted to add position:relative
to the containing .row
.
The menu is positioned absolutely in relation to the nearest (non-static
) positioned ancestor.
let isVisible = false;
document.getElementById("r3").addEventListener('click', function() {
let menuEle = document.getElementById("menu");
if (!isVisible) {
menuEle.classList.add("show");
} else {
menuEle.classList.remove("show");
}
isVisible = !isVisible;
})
html {
box-sizing: border-box;
}
body {
padding: 0px;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.layout {
height: 150px;
width: 100%;
border: solid 1px #000;
overflow-y: auto;
overflow-x: hidden;
}
.row {
height: 50px;
width: 100%;
border: solid 1px #a5a5a5;
cursor: pointer;
color: red;
position: relative;
}
.row:hover {
background: #c9dcff;
}
.menu {
display: none;
justify-content: center;
align-items: center;
position: absolute;
width: fit-content;
background: #e7e7e7;
padding: 0.8em;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.menu.show {
display: flex;
}
b {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="layout">
<div class="row"></div>
<div class="row"></div>
<div class="row" id="r3">
<div class="menu" id="menu">
<span>Menu of r3</span>
</div>
r3: First click here to see the menu and click again to hide, then scroll a bit above and click again
</div>
<div class="row"></div>
</div>
</body>
</html>