Question

考虑以下代码，您可以看到一个HTML元素，其元素彼此嵌套，从.depth-0开始，一直向下到.depth-4。

在最后一个深度，有一个特殊的类元素.fixed-slide-down。我打算做的是以下内容：当有人点击.depth-4处的元素时，如果该元素与.fixed-slide-down有兄弟，则下滑应该按照其名称提示，以及，向下滑动:)要实现这一点，下拉菜单应显示在菜单栏后面（在本例中，名为.depth-0）。我设法将position: fixed向下滑动元素放在他的直接父亲.depth-3之后，但是我无法将其置于其他所有父母之后（或在其他深度之后）。

＆＃13;

.depth-0 {
  background-color: red;
  width: 100%;
  height: 50px;
}

.depth1 {
  height: 100%;
  display: inline-block;
  line-height: 50px;
  vertical-align: top;
  background-color: inherit;
}

.depth-1.left {
  width: 30px;
}

.depth-1.right {
  width: calc(100% - 35px);
}

.depth-2 {
  height: 100%;
  float: right;
  background-color: inherit;
}

.depth-3 {
  height: 100%;
  float: left;
  padding-right: 5px;
  z-index: 3;
  background-color: inherit;
}

.depth-4 {
  position: relative;
  z-index: 2;
  background-color: inherit;
}

.fixed-slide-down {
  width: 100%;
  height: 30px;
  background-color: green;
  left: 0px;
  position: fixed;
  top: 20px;
  z-index: 1;
}

＆＃13;

<div class='depth-0'>
  <div class='depth-1 left'>
    Left
  </div>
  <div class='depth-1 right'>
    <div class='depth-2'>
      <div class='depth-3'>
        <div class='depth-4'>
          Button 1
        </div>
        <div class='fixed-slide-down'>
          Slidedown
        </div>
      </div>
      <div class='depth-3'>
        <div class='depth-4'>
          Button 2
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

在不改变当前HTML结构的情况下，是否可以实现所需的行为？（要使用z-index放下下拉列表，请注意每个具有.depth-x类的元素？）

如果没有，那么HTML结构变化是必要的吗？

我必须保持向下滑动position:fixed，因为它应该有宽度为屏幕宽度的100％，并且它应该位于屏幕的左边缘（所以基本上它应该水平覆盖整个屏幕）。使用position: absolute，我设法获得了理想的结果，我甚至设法让下滑的容器全屏显示，但我无法将其定位到左边缘这样的屏幕。

我的问题的另一个有用的解决方案是，一种方法，当他的父母没有直接定位时，制作一个绝对定位的元素，坚持屏幕的左边缘。如果我没有弄错的话，目前只有HTML和CSS这是不可能的，但也许我错了。

JSFiddle：https://jsfiddle.net/eyfyfLrq/

如何将固定位置元素放在具有更高z-index的每个其他元素之下？

0 个答案: