0

I would like an HTML element to show up behind a fixed header element in HTML. (Think dropdown menu under a fixed header.) Problem is, the div element (which is a child of the header element) always displays on top for all permutations of z-index and position I've tried. Please see this fiddle: http://jsfiddle.net/wm3dk82x/4/

Read comments in the jsfiddle code. I've permuted position and z-index, but can't get it to work. HTML and CSS snippets follow:

.header {
  background-color: red;
  position: fixed;    /* must be fixed -- not an option to change this value */
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  z-index: 5;
}

.divinheader {
  background-color: yellow;
  position: fixed;   /* changed this for every option of position */
  padding-top: 50px;
  top: 0;
  left: 90%;
  width: 8%;
  height: 20px;
  text-align: center;
  z-index: 2;      /* less than the z-index of parent  (2 < 5) */
}
<div class="header">fixed
  <div class="divinheader">fixed1</div>
</div>
<div class="content">relative</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
Tony
  • 15
  • 2
  • 7
  • Well, I got my solution this way. The answers mentioned in the question above just referenced standards that said it couldn't be done. (Thanks, John!) – Tony Jul 01 '19 at 16:25

1 Answers1

1

Change this:

<div class="header">fixed
  <div class="divinheader">fixed1</div>
</div>

to this:

<div class="divinheader">fixed1</div>
<div class="header">fixed</div>

Fiddle: http://jsfiddle.net/0t471c3w/

John
  • 3,716
  • 2
  • 19
  • 21