图层顶部有动态宽度，除了position之外的其他选择：绝对

Question

我知道获得最高层的唯一方法是使用position：absolute。

（顶级好，底部坏）

一旦你这样做，你几乎失去了与页面其余部分动态扩展的选项。

当然你可以做一些width: calc(62% - 60px);黑客攻击并在那里得到它，或者你可以编写一个计算大小等的脚本。

但是真的没有办法让图层在顶部并且仍然可以随页面缩放吗？

Answer 1

它可能与position:relative;相对定位的元素占据父和子的宽度。可以通过z-index使用。 z-index仅适用于定位元素。

示例代码：

＆＃13;

＆＃13;

.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}

＆＃13;

<div style="width:120px;"  class="menuParent">
  <div class="menu">
    <div>AirBnb</div>
    <div>Booking.com</div>
    <div>Expedia
      <div>Agents</div>
    </div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
  <div class="menu">
   <div>AirBnb</div>
    <div>Booking.com</div>
    <div>Expedia
      <div>Agents</div>
    </div>ThaiHome</div>
    </div>
    <div> Other div below the menu list width bigger width</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

parent{
position: relative;
}

child {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}