Question

问题：

我正在尝试创建一个下拉列表。当输入被聚焦时，它下面的div出现。但我希望div能够处于更高的z指数。如果div处于较高的z-index，那么它下方的按钮将被覆盖，但是现在div不接受任何z-index。

代码：

我有一个我现在正在工作的例子：

class Main extends React.Component {
  render() {
    return(    <div style={{width: 200}}>
    <input className="input" />
    <div className="dropdown" style={{ position: 'absolute', zIndex: 9999 }}></div>
    <button>Hello</button>
  </div>
    )
  }
}


ReactDOM.render(
  <Main></Main>,
  document.getElementById('example')
);

这是CSS：

html, body {
  height: 100%
}

body {
  background: #333;
  font-family: Helvetica Neue;
}

input {
    width: 100%;
}

input + div.dropdown {
    background-color: #ffff00;
    display: none;
    height: 200px;
    width: 100%;
}

input:focus + div.dropdown {
    display: flex;
}

以下是相同代码的plunker：

https://plnkr.co/edit/B8Kjhv6rUOv0s7QKotxI?p=preview

我尝试了什么：

如果我将下拉列表div的位置更改为绝对值，则应用z-index，但div的宽度等于屏幕宽度。

我正在创建一个可重用的组件，所以我不能给出固定的宽度。

注意：

给予主div的固定宽度只是一个例子，但在实际使用情况下，主div的宽度将由其父组件的100％宽度自动确定。

Answer 1

摘要：

在包含（父）元素上声明position relative，以允许对绝对定位的兄弟元素width进行控制。

关于定位元素和堆叠上下文：

处理定位的元素和堆叠上下文时需要考虑的一些事项：

z-index属性值仅适用于定位的元素。
定位元素是position属性值定义为absolute，fixed，relative或 sticky ^experimental;这不包括static，任何元素的默认定位。
将元素声明为绝对定位的元素时（absolute或fixed）您正在从中移除元素自然文件流;这只是意味着元素不再存在以relative或static的方式与兄弟元素互动元素做（想象元素＆＃34;选址上面＆＃34; DOM的其余部分）。
默认情况下，绝对定位的元素的位置是＆＃34;相对于＆＃34;到窗口;这意味着如果你抵消它的位置使用left或right属性值，它会移动等于的距离窗口中的属性值。您可以定位元素 position属性值absolute（不是fixed）相对的。{ 如果声明相对定位，则为任何包含元素 包含元素。
这是您在用例中观察到的问题;自从嵌套的.dropdown元素位于absolute，它被取出自然流动和占据的全部可用宽度包含文档，以便将其限制为其宽度包含元素，position: relative应该在其上声明包含元素，例如：

<div style="width:200px;position: relative;" data-reactid=".0"> <input class="input" data-reactid=".0.0"> <div class="dropdown" style="position:absolute;z-index:9999;" data-reactid=".0.1"></div> <button data-reactid=".0.2">Hello</button> </div>

将类选择器归因于此元素可能会更好（也更容易扩展），以便您可以使用其他声明的样式（在style.css中）从外部管理和维护这些样式，例如：

修改后的html结构：

<div class="foobar" data-reactid=".0">
   <input class="input" data-reactid=".0.0">
   <div class="dropdown" style="position:absolute;z-index:9999;" data-reactid=".0.1"></div>
   <button data-reactid=".0.2">Hello</button>
</div>

其他css声明：

.foobar {
   width:200px;
   position: relative; /* required for nested absolute element */
}

<强>参考：

如何设置下拉div的z-index

1 个答案: