Question

我希望HTML元素显示在HTML中的固定标头元素后面。（请考虑固定标题下的下拉菜单。）问题是，div元素（它是标题元素的子元素）始终在所有z-index和我尝试过的位置排列的顶部显示。请查看此小提琴：http://jsfiddle.net/wm3dk82x/4/

阅读jsfiddle代码中的注释。我已经对位置和z-index进行了排列，但无法使其正常工作。 HTML和CSS片段如下：

.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>

Answer 1

更改此：

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

对此：

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

提琴：http://jsfiddle.net/0t471c3w/

需要帮助使用CSS将HTML子元素放置在父元素后面

1 个答案: