I have an accordion and inside it, a div.
Then inside it, a block that shows extra text if the user clicks on the clock icon.
But that div is not showing outside the accordion and it breaks when it´s the last line.
I changed the z-index css to 20 to make it on top but doesnt work.
Any CSS expert to give me some help?
Hi Caroline,
It's like a z-index issue. Could you please share the URL? It will help me debug the CSS code
Hi @Carolina Bessa
Basically This issue regarding Z - Index As per the precedence upper div is higher z-index as compare to Lower div .
or if possible please send the OML or URL.
Regards ,
Rajat
Hi,
Please set the below CSS property properly z-index, position: absolute, Overflow Property: visible
Sample CSS
.accordion-container {
position: relative; /* Ensure the accordion container is positioned */
overflow: visible; /* Make sure child elements can escape the container */
}
/* The div inside the accordion */
.accordion-content {
position: absolute; /* Position relative to the accordion container */
z-index: 1000; /* Set a high z-index to appear on top */
/* Add extra style for better visibility */
.accordion-content .extra-text {
padding: 10px;
border: 1px solid #ccc;