I developed a left menu, which overlaps the main content, but some elements of the main content overlap the menu ignoring the z-index. I guess the problem are the relative positioning of both elements:.
Here the code, it is just a part in order to reproduce the problem:
body {
margin: 0
}
.root {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.bar {
padding: 0.5em 1.5em 0.5em 1.5em;
align-items: center;
}
.content {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: black;
color: white;
}
.page {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: yellow;
}
.sub-title {
display: flex;
gap: 1em;
align-items: center;
padding: 1.5em;
text-transform: uppercase;
}
.page-content {
display: flex;
flex: 1;
flex-direction: column;
overflow-x: auto;
padding: 0 1.5em 1.5em 1.5em;
}
.page-content-wrapper {
flex: auto;
}
.heading {
display: flex;
align-items: center;
margin-bottom: 1em;
}
.search-wrapper {
flex: auto;
}
.search {
display: inline-flex;
align-items: center;
position: relative;
}
input {
padding: 0.75em 2.75em 0.75em 1em;
}
svg {
width: 1.25em;
right: 1em;
position: absolute;
}<div class="root">
<div class="bar">Title</div>
<div class="content">
<aside class="sidebar">
<ul>
<li>item menu</li>
</ul>
</aside>
<div class="page">
<div class="sub-title">Subtitle</div>
<div class="page-content">
<div class="page-content-wrapper">
<div class="heading">
<div class="search-wrapper">
<div class="search">
<input type="search" placeholder="Search configurations" value="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>I am sure that the problem is the two relative elements, but I don’t know how to fix it.
Please need help. Thanx.
2
Answers
simply adding a z-index override with !important tag to the sidebar class should resolve this as seen in the code snippet. It should still allow all elements within the sidebar to display correctly while objects (underneath) appear in their respective orders.
hope this helps.
If I understood your problem correctly, what you need is to add to
.sidebar{...}the following format:z-index: 1;And this is how it will look: