打开ul下拉菜单时不想让下方元素下移该如何实现？

实现方案 #

核心逻辑是让展开的下拉选项脱离正常文档流，悬浮在页面上层，不占用实际布局高度，自然不会挤压下方元素产生位移。推荐优先使用第一种方案，代码可维护性更高。

方案一：轻微调整HTML结构（推荐） #

调整后HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="selected-change">
  <li class="init">Select</li>
  <!-- 新增下拉选项专属包裹容器 -->
  <div class="dropdown-options">
    <li>Example 1</li>
    <li>Example 2</li>
    <li>Example 3</li>
    <li>Example 4</li>
    <li>Example 5</li>
    <li>Example 6</li>
  </div>
</ul>
<textarea placeholder="...."></textarea>

调整后CSS代码

ul {
  width:250px;
  border:1px solid #CCC;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li.init {
  padding: 5px 10px;
  cursor: pointer;
}
.dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  background: #fff;
  z-index: 99;
  box-sizing: border-box;
  max-height: 100px;
  overflow: auto;
}
.dropdown-options li {
  padding: 5px 10px;
  list-style: none;
  margin: 0;
}
.dropdown-options li:hover {
  background: #f5f5f5;
}
textarea{
  resize:none;
  margin-top: 10px;
}

调整后JS代码

$("ul").on("click", function() {
  $(this).find('.dropdown-options').toggle();
});

方案二：完全不改动现有HTML结构 #

如果不能修改HTML，仅需要调整CSS即可，缺点是灵活性差，li高度变更后需要同步调整偏移值：

ul {
  width:250px;
  border:1px solid #CCC;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li.init {
  padding: 5px 10px;
  cursor: pointer;
}
ul li:not(.init) {
  padding: 5px 10px;
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  background: #fff;
  z-index: 99;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
}
/* 按顺序设置每个选项的垂直偏移，28px为单个li的总高度 */
ul li:not(.init):nth-of-type(2) {
  top: 100%;
  border-top: 1px solid #ccc;
}
ul li:not(.init):nth-of-type(3) {
  top: calc(100% + 28px);
}
ul li:not(.init):nth-of-type(4) {
  top: calc(100% + 56px);
}
ul li:not(.init):nth-of-type(5) {
  top: calc(100% + 84px);
}
ul li:not(.init):nth-of-type(6) {
  top: calc(100% + 112px);
}
ul li:not(.init):nth-of-type(7) {
  top: calc(100% + 140px);
}
ul li:not(.init):hover {
  background: #f5f5f5;
}
textarea{
  resize:none;
  margin-top: 10px;
}

JS代码无需修改，直接沿用原有代码即可。

内容的提问来源于stack exchange，提问作者JFeel