javascript - 如何使选择的下拉列表高于所有其他元素

Question

HTML:

<div style="overflow: auto; position: relative; z-index: 99999999 ! important;" class="content">
    <h4>Filter</h4>
    <div style="overflow: visible; width: 100%; padding: 0 0 3% 0;">
        <!-- the DDL is here -->
    </div>
</div>

CSS:

  /* ----------- */
  .content {
      background: #FFF;
      border-top: 2px solid #00539B;
      padding: 2em;
      min-height: 115px;
      /*height: 220px;*/
  }

  .content h2,
    .content h3,
    .content h4,
    .content p {
      margin: 0 0 15px 0;
      color: #00539B;
  } 

如何修改我的页面或所选 C​​SS/JQuery 中的样式，使其显示在页面上的所有其他 DIV 之外。

Answer 1

你应该做一些 DOM 操作:

$('#child').css({
  left:10,
  top:25
}).appendTo(document.body);

div{width:300px; height:150px; overflow:hidden; background:red;}
#child{width:150px; height:250px; overflow:hidden; background:yellow; left:20px; top:50px; position:absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Parent
  <div id='child'>Child</div>
</div>

---

元素出现在 body 的结尾，它们可以显示在所有其他元素之上。