Posted in
823
12:59 am, November 14, 2022
Z-Index Code Front - CSS to change z-index when element is active
If you have 2 elements and they over lap and then you add a click event then it can become complex. So this script adds some z-index changing order to bring the active dot to the front. Mouse over the elements and they should come to the front as they are active.
Z-Index Code Front - CSS to change z-index when element is active Demo
View Demo Full Screen View Demo New Tab
Z-Index Code Front - CSS to change z-index when element is active Code
HTML
<div class="wrapper">
<div class="ele ele1"></div>
<div class="ele ele2"></div>
<p>If you have 2 elements and they over lap and then you add a click event then it can become complex. So this script adds some z-index changing order to bring the active dot to the front. Mouse over the elements and they should come to the front as they are active. </p>
</div>
CSS
.wrapper p {
font-family:"Open Sans", sans-serif;
color:#CCC;
}
.wrapper {
position:relative;
height:400px;
width:600px;
border-radius:10px;
background:#000;
padding:30px;
}
.ele {
z-index:5;
border-radius:40px;
height:80px;
width:80px;
position: absolute;
}
.ele1:hover,
.ele1:active
{
z-index:6;
}
.ele1 {
background:pink;
top:140px;
left:20px;
}
.ele2 {
background:teal;
top:140px;
left:70px;
}
.ele2:hover,
.ele2:active
{
z-index:6;
}
Related Tags
Add Comment
Other Items in CSS Z-Index
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript