I make a list appear, with absolute position, of some buttons. This list is behind a div above, making the list cut off. I already tried to z-index the list and the div that is in front, but it didn’t work.
Link with example:
https://codepen.io/pedrocardogiiromaps/pen/YzMojoe
const priorities = document.getElementsByClassName('priority-button');
const arrayPriorities = Array.from(priorities);
arrayPriorities.forEach(function(element) {
element.addEventListener('click', function(event) {
const nextElement = element.nextElementSibling;
if (nextElement.classList.contains('hidden')) {
nextElement.classList.remove('hidden');
} else {
nextElement.classList.add('hidden');
}
const position = getPositionRelativeToPage(nextElement);
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
//if (position > windowHeight * 0.5) {
nextElement.style.bottom = `${windowHeight - windowHeight * 0.95}px`;
//}
});
});
function getPositionRelativeToPage(element) {
const rect = element.getBoundingClientRect();
const scrollTop = window.scrollY;
return rect.top + scrollTop;
}.lanes {
display: flex;
align-items: flex-start;
justify-content: start;
gap: 16px;
padding: 24px 32px;
overflow: scroll;
height: 100%;
}
.container-prioridades {
position: relative;
}
.prioridades {
position: absolute;
display: flex;
flex-direction: column;
}<div class="lanes">
<div class="" id="">
<div style="width: 100%; display: flex; justify-content: space-between;">
<h3 class="heading">TODO</h3>
</div>
<div class="swim-lane" id="todo-lane" style="max-height: 200px; overflow-y: auto; overflow-y: scroll;">
<div class="task" draggable="true">
Get groceries
<div class="container-prioridades">
<button class="priority-button">prioridades</button>
<div class="prioridades hidden" style="z-index: 100;">
<button>1</button>
<button>1</button>
<button>1</button>
</div>
</div>
</div>
<div class="task" draggable="true">
Feed the dogs
<div class="container-prioridades">
<button class="priority-button">priorities</button>
<div class="prioridades hidden" style="z-index: 100;">
<button>1</button>
<button>1</button>
<button>1</button>
</div>
</div>
</div>
<div class="task" draggable="true">
Mow the lawn
<div style="display: flex;align-items: center;">
<div class="container-prioridades">
<button class="priority-button">prioridades</button>
<div class="prioridades hidden" style="z-index: 100;">
<button>1</button>
<button>1</button>
<button>1</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>I tried using z-index, isolation, fixed and nothing helped.