Can someone assist with the issue I'm having regarding the use of sticky and z-index? Whenever I apply a z-index to a positioned sticky element, its content disappears.
Question: How can I utilize z-index for a positioned sticky element without any compromise (in a simple way)?
Below is my problem:
.sticky,.no-sticky{
width:250px;
position: relative;
}
.sticky input{
position: sticky;
z-index: 23;
}
.icon:before{
content: "...";
position: absolute;
font-size: 31px;
top: -16px;
right: 84px;
}
/* ====== run ===================2 */
.sticky1,.no-sticky1{
width:250px;
position: relative;
}
.sticky1 input{
position: sticky;
/*z-index: 23;*/
}<div class="no-sticky">
<input type="text">
<span class="icon"></span>
</div>
<hr>
<p>see below input ... dots are not appearing </p>
<div class="sticky">
<input type="text">
<span class="icon"></span>
</div>
<h1>Run without z-index</h1>
<div class="no-sticky1">
<input type="text">
<span class="icon"></span>
</div>
<hr>
<div class="sticky1">
<input type="text">
<span class="icon"></span>
</div>Problem Showing:
#container{
width:175px;
height: 200px;
overflow-y:scroll;
overflow-x:hidden;
position: relative;
z-index:40px;
}
input{
position: sticky;
top:0;
left:0;
border:none;
outline: 1px solid #cccccc52;
}
.icon:before{
content:"...";
position: absolute;
font-size:30px;
top:-16px;
}<div id="container">
<span style="position:relative;">
<input type="text">
<span class="icon"></span>
</span>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
</div>Please provide assistance. Thank you in advance!