下拉列表忽略父级溢出

时间：2016-08-23 20:44:22

标签： css css3 sass

我有一个模态，我在元素中有下拉列表。

问题是因为我有一个溢出设置，下拉列表虽然看起来没有出现在模态的顶部。我明白了，因为我在父母身上设置了一个溢出：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>

2 个答案:

答案 0 :(得分：3)

您需要设置下拉元素position: fixed，下拉容器positon: absolute和父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: 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>

答案 1 :(得分：-1)

你需要使用z-index 999，并在dropdown css中定位相对位置。 示例：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题