Position absoulte over position fixed is not visible in css

Question

I need to visible this .inner elm, But it's not working. z-index is not working here as expected. But when I remove the .parent elm to position: absolute/ static then it's visible. Is it normal or I have some code problem.

[Note] The .inner elm should be inside of the .parent elm and .parent, .child elm should have the same z-index. Example:

body{
  margin: 0
}

.inner{
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #d1d5da;
  z-index: 1001;
}

.parent, .child{
  z-index: 1000;
 } 

.parent{
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  
}

.child{
  position: fixed;
  top: 61px;
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

<div class="parent">
  <div class="inner" draggable="true">
    
  </div>
</div>
<div class="child"></div>

score 0 · Answer 1 · answered Apr 11 '20 at 06:22

0

Also set z-index for the fixed element. The z-index works relatively and you have left it to the browser default behavior.

body{
  margin: 0
}

.inner{
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #d1d5da;
  z-index: 99999999;
}

.parent{
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  z-index:1;
}

.child{
  position: fixed;
  top: 61px;
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

<div class="parent">
  <div class="inner">
    
  </div>
</div>
<div class="child"></div>

answered Apr 11 '20 at 06:22

Ali Sheikhpour

10,475
5
41
82

Sorry for this, Don't approve it. But I need the same z-index in parent and the child element – Apr 11 '20 at 06:30
1

In your case the parent and child are not really parent and child. They are sibiling elements. So what you mean from same z-index for two sibiling elements? – Ali Sheikhpour Apr 11 '20 at 06:38
sorry to say that, my mistake. I didn't mean it, I was talking about the .parent and .child class name not the elm. "So what you mean from the same z-index for two sibling elements?", Yes. – Apr 11 '20 at 06:42

score 0 · Accepted Answer · answered Apr 11 '20 at 06:38

It's not possible with .parent, .child elm z-index same. You must change the z-index, otherwise, it will not work. You can try this code. It's not a big difference what you asked for.

body{
  margin: 0
}

.inner{
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #d1d5da;
  z-index: 1001;
}

.parent{
  z-index: 1000;
}

.child{
  z-index: 999;
}
.parent{
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  
}

.child{
  position: fixed;
  top: 61px;
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

<div class="parent">
  <div class="inner">
    
  </div>
</div>
<div class="child"></div>

Position absoulte over position fixed is not visible in css

2 Answers2