忽略父元素的溢出 [英] Ignore overflow of parent element

问题描述

我有以下下拉HTML结构和CSS，它的父级隐藏了溢出-

I have a the following dropdown html structure and css, it's parent has an overflow hidden -

我遇到的问题是，当您选择下拉菜单时，被隐藏的溢出切断了，我需要它忽略溢出。

The problem I am having is that when you select the dropdown, it is cut off by the overflow hidden, I need it to ignore the overflow.

我已经考虑过将下拉菜单的位置更改为固定，但是接下来我需要计算每个下拉菜单的位置，其他任何建议都会有所帮助！

I have looked at changing the dropdowns position to fixed, but then I would need to calculate its position for each dropdown, any other suggestions would help!

.overflow-container {
  display: block;
  height: 60px !important;
  overflow: auto;
  overflow-x: hidden;
  float: left;
  background-color: #eaeaea;
  padding: 20px;
}

.dropdown-container:hover .dropdown1 {
  display: block;
}

.dropdown1 {
  display: none;
}

<div class="overflow-container">
  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

</div>

请参见工作的JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/

See working JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/

该结构是使用可设置html和css的插件构建的。我可以更改CSS，但不能更改html结构。我也无法更改父级的高度，如果有多个下拉菜单，则需要滚动。

The structure is built using a plugin which sets the html and css. I am able to change the css but not the html structure. I also cant change the height of the parent, it needs to be scrollable if there are multiple dropdowns.

推荐答案

使用 position：absolute 并使用保证金或转换来调整头寸。然后不要将 position：relative 添加到父元素，以便其被溢出忽略。

Use position:absolute and use margin or translate to adjust the position. Then don't add position:relative to the parent element so it get ignored by the overflow.

.overflow-container {
  display: block;
  height: 60px !important;
  overflow: auto;
  overflow-x: hidden;
  float: left;
  background-color: #eaeaea;
  padding: 20px;
}

.dropdown-container:hover .dropdown1 {
  display: block;
}

.dropdown1 {
  display: none;
  position:absolute;
  margin-left:100px;
  margin-top:-10px;
}

<div class="overflow-container">
  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

  <div class="dropdown-container">
    Select an option
    <ul class="dropdown1">
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
      <li class="dropdown-item">Option 3</li>
    </ul>
  </div>

</div>

这篇关于忽略父元素的溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！