html - 下拉列表由 slider html 隐藏

Question

我有一个带下拉列表的光滑 slider ，当我打开列表时，它被 slider 隐藏了。我检查了 slick.css 并发现了这个:

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 6,
  variableWidth: true
});

body {
  background: #ccc;
  padding: 0;
}

.container {
  padding: 25px;
  border: 1px solid #000;
}

.slider {
  border: 1px solid #000;
}

.slider {
  height: 80px;
}

.slider p {
  background: #fff;
  height: 75px;
  border: 1px solid #ccc;
}

<h2>Variable Width</h2>
<div class="container">
  <div class="slider variable-width">
    <div style="width: 200px; color:red">
      <span>
              <a class='dropdown-button btn white clickDrop' ng-click="clickS()"
                data-activates='dropdownSkill' style="width: 295px">Drop Me!</a>
                            <!-- Dropdown Structure -->
              <div id='dropdownSkill' class='dropdown-content'>
                  <input class="inputDropdown" ng-model="skillValue"    style="margin-left: 5px">
                  <ul class="" style="width: 300px" ng-repeat="skill in skillsFilter | filter: skillValue">
                  <li ng-click="selectSkill(skill.SKILLID)" ng-model="skill.SKILLID">alyssa</li>
                   <li ng-click="selectSkill(skill.SKILLID)" ng-model="skill.SKILLID">mel</li>
                                </ul>
                            </div>
            </span>
    </div>
    <div style="width: 200px;">
      <p>200</p>
    </div>
    <div style="width: 75px;">
      <p>75</p>
    </div>
    <div style="width: 300px;">
      <p>300</p>
    </div>
    <div style="width: 225px;">
      <p>225</p>
    </div>
    <div style="width: 175px;">
      <p>175</p>
    </div>
    <div style="width: 100px;">
      <p>100</p>
    </div>
    <div style="width: 200px;">
      <p>200</p>
    </div>

  </div>
</div>

但是当我移除溢出时，所有的 slick-slide 都显示如下: 我在这里做了一个 fiddle :http://jsfiddle.net/memvovkz/150/

谁能帮帮我提前致谢:)

Answer 1

后代元素将始终被具有overflow: hidden 的元素剪裁。甚至带有 position: fixed 的元素。

您可以从 slider 移动下拉菜单，将其设置为固定位置或绝对位置。在那之后点击“放下我!”您可以在需要的地方设置下拉列表的位置并显示它。

要获得正确的位置，您可以使用“DROP ME”的偏移量