下拉菜单忽略父级溢出

Question

我有一个模态框，其中有下拉菜单。

问题在于，由于我设置了overflow，尽管下拉菜单出现了，但它并没有出现在模态框的上方。我理解这是因为我在父元素上设置了overflow:auto。

有没有办法通过CSS忽略父元素并将下拉菜单显示在“模态框”上方？

您将在示例中看到，如果滚动，红线内的内容是可见的。这是根据我的代码预期的行为。我需要做出什么调整才能将下拉菜单显示在模态框之上？

已尝试使用z-index进行修复，并在SO上阅读了一些关于将祖先元素设置为相对位置的内容。

最好使用纯CSS解决方案。

谢谢！

.w-100 {
  width: 100%;
  height: 100%;
}

.h-100 {
  width: 100%;
  height: 100%:
}

.modal-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 65;
  padding-top: 100px;
  overflow: auto;
  background-color: rgba(0,0,0,.6);
}

.modal-small {
  max-width: 600px;
  width: 40%;
  margin: 0 auto;
  float: none;
  display: block;
  position: relative;
  background-color: #fff;
  padding: 0;
}

.container {
  min-height: 120px;
  max-height: 400px;
  overflow: auto;
  padding: 15px;
}

.element-container {
  height: 100px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.element-flex-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 15px;
  border-radius: 2px;
  border-bottom: 3px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
  border-top: 1px solid rgba(0,0,0,.1);
}

.avatar {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  margin-right: 10px;
}

.flex-1 {
  flex: 1;
}

.dropdown-width {
  text-align: right;
  width: 100px;
}

.dropdown-container {
  display: inline;
  position: relative;
}

.toggle-dropdown {
  color: #4caf50
}

.dropdown {
  position: absolute;
  border: 1px solid red;
  left: auto; 
  right: 0;
  width: 120px; 
  display: block;
  background-color: #fff;
  z-index: 10;
  margin-bottom: 20px;
  padding: 0;
}

<div class="modal-overlay">
  <div class="modal-small">
    <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
      <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
        <div class="container">
          
          <!-- Repeat of elements -->
          <div class="element-container">
            <div class="element-flex-container">
              <img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
              <div class="flex-1">
                Something here
              </div>
              <div class="dropdown-width">
                <div class="dropdown-container">
                  <div class="toggle-dropdown">
                    Toggle
                  </div>
                  <div class="dropdown">
                    Something here
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

- Stephen C

---

2021年，这个问题仍然没有纯粹的CSS解决方案。真是让人紧张。 - undefined

Answer 1

要使下拉框元素正常工作，您需要将其position: fixed，下拉框容器position:absolute，并将父元素position:relative。您可以使用top、right、left、bottom调整容器元素的位置，但需要在固定元素上使用负边距。

.w-100 {
  width: 100%;
  height: 100%;
}

.h-100 {
  width: 100%;
  height: 100%:
}

.modal-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 65;
  padding-top: 100px;
  overflow: auto;
  background-color: rgba(0,0,0,.6);
}

.modal-small {
  max-width: 600px;
  width: 40%;
  margin: 0 auto;
  float: none;
  display: block;
  position: relative;
  background-color: #fff;
  padding: 0;
}

.container {
  min-height: 120px;
  max-height: 400px;
  overflow: auto;
  padding: 15px;
}

.element-container {
  height: 100px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.element-flex-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 15px;
  border-radius: 2px;
  border-bottom: 3px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
  border-top: 1px solid rgba(0,0,0,.1);
}

.avatar {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  margin-right: 10px;
}

.flex-1 {
  flex: 1;
}

.dropdown-width {
  text-align: right;
  width: 100px;
}

.dropdown-container {
  display: inline;
  position: absolute;
  top: 0;
  right:0;
}


.toggle-dropdown {
  color: #4caf50
}

.dropdown {
  position: fixed;
  border: 1px solid red;
  width: 120px; 
  display: block;
  background-color: #fff;
  z-index: 10;
  margin-bottom: 20px;
  padding: 0;
 
}

<div class="modal-overlay">
  <div class="modal-small">
    <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
      <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
        <div class="container">
          
          <!-- Repeat of elements -->
          <div class="element-container">
            <div class="element-flex-container">
              <img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
              <div class="flex-1">
                Something here
              </div>
              <div class="dropdown-width">
                <div class="dropdown-container">
                  <div class="toggle-dropdown">
                    Toggle
                  </div>
                  <div class="dropdown">
                    Something here
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

- Dan Devine

---

谢谢！然而，如果有多个元素引发了溢出，该解决方案将无效，因为它是在页面加载时计算的。 - undefined

当父元素需要滚动时，fixed 定位会失效。 - undefined

Answer 2

你需要在下拉菜单的 CSS 中使用 z-index 为 999，并且设置 position 为 relative。

例子：

.w-100 {
  width: 100%;
  height: 100%;
}

.h-100 {
  width: 100%;
  height: 100%:
}

.modal-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 65;
  padding-top: 100px;
  overflow: auto;
  background-color: rgba(0,0,0,.6);
}

.modal-small {
  max-width: 600px;
  width: 40%;
  margin: 0 auto;
  float: none;
  display: block;
  position: relative;
  background-color: #fff;
  padding: 0;
}

.container {
  min-height: 120px;
  max-height: 400px;
  overflow: auto;
  padding: 15px;
}

.element-container {
  height: 100px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.element-flex-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 15px;
  border-radius: 2px;
  border-bottom: 3px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
  border-top: 1px solid rgba(0,0,0,.1);
}

.avatar {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  margin-right: 10px;
}

.flex-1 {
  flex: 1;
}

.dropdown-width {
  text-align: right;
  width: 100px;
}

.dropdown-container {
  display: inline;
  position: relative;
}

.toggle-dropdown {
  color: #4caf50
}

.dropdown {
  position: relative;
  z-index: 9999;
  border: 1px solid red;
  left: auto; 
  right: 0;
  width: 120px; 
  display: block;
  background-color: #fff;
  z-index: 10;
  margin-bottom: 20px;
  padding: 0;
}

<div class="modal-overlay">
  <div class="modal-small">
    <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
      <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
        <div class="container">
          
          <!-- Repeat of elements -->
          <div class="element-container">
            <div class="element-flex-container">
              <img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
              <div class="flex-1">
                Something here
              </div>
              <div class="dropdown-width">
                <div class="dropdown-container">
                  <div class="toggle-dropdown">
                    Toggle
                  </div>
                  <div class="dropdown">
                    Something here
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

- Isabela Cristina

---

你需要使用 z-index 为 999，并且 position 设置为 relative :D - undefined

请编辑您的答案并说明您所做的更改及原因。这将使您的答案更好。有关更多信息，请参见[答案]。 - undefined