<style type="text/css">
.main {
position: absolute;
border-radius: 8px;
border: none;
height: 54%;
top: 35%;
/*33%*/
color: #FFFFFF;
font-size: 0.7em;
overflow: hidden;
z-index: 50;
}
.test1 {
display: inline-block;
height: 100%;
width: 100%;
}
.test2 {
display: inline-block;
height: 100%;
width: 100%;
}
.main:focus {
z-index: 55;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
outline: none;
top: 20%;
}
</style>
<div>
<!--other element-->
<div class="main" tabindex="0">
<div class="test1">
<!--other element-->
</div>
<div class="test2">
<div class="abc">
<!--other element-->
</div>
<div class="abc">
<!--other element-->
</div>
</div>
</div>
</div>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> .main {
position: relative;
height: 120px;
z-index: 10;
}
.test1 {
height: 70%;
}
.test2 {
height: 80%;
}
.main:focus {
z-index: 22;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
outline: none;
top: 25%;
background-color: blue;
} <div>
<!--other element-->
<div class="main" tabindex="0">
<div class="test1">
<span>Content1</span>
</div>
<div class="test2">
<div class="abc">
<!--other element-->
<span>Content2</span>
</div>
<div class="abc">
<span> Content3</span>
</div>
</div>
</div>