z-index layered elements affecting base layer elements [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
As you can see there is an image slideshow in center of the page and those two description divisions which are set to z-index 2 but still it is been affecting the images and slideshow which doesnt have z-index defined
and when I removed the description divisions the slideshow gets back to normal
So is there any way I can add those description divisions in somewhat different layer from all other elemetns and prevent it from affecting other elements in the page (also those description divisions will be appeared on clicking the buttons in menubar by default they will be hidden)

Answer 1

You have to use position: absolute; for more info since you didn't share your code's use my example:
/* Giving a background-color to the nav container. */
nav {
margin: 100px 0;
background-color: #E64A19;
width: 700px;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: #E64A19;
}
/* Styling the links */
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width:170px;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul {
position: absolute;
top:0;
left:100%;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials
<!-- Second Tier Drop Down -->
<ul>
<li>Stuff</li>
<li>Things</li>
<li>Other Stuff</li>
</ul>
<!-- Second Tier Drop Down ends-->
</li>
</ul>
<!-- First Tier Drop Down ends -->
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>