Question

有类似的问题，但没有一个对我有帮助。

我有两个div。子级（菜单）和父级（浮动栏）。他们俩的位置都是绝对的。

场景是，这是一个浮动条，它动态出现在屏幕的不同部分，并且必须堆叠在其他所有内容之上，因此，为什么要给父级一个绝对位置。

该子项是一个菜单列表，也应显示在其他所有元素的顶部，适合其内容的大小，并在您将鼠标悬停在其同级上时显示，该按钮位于浮动工具栏上。

.floating-bar {
  position: absolute;
  z-index: 1;
  background-color: lightblue;
  height: 50px;
  padding: 5px;
}

.button-menu {
  max-width: 200px;
  background-color: yellow;
  padding: 10px;
  position: absolute;
  z-index: 2;
  display: none;
}

.button {
  background-color: blue;
  color: white;
  width: 35px;
  height: 50px;
}

.button:hover + .button-menu {
    display: block;
}

<div class="floating-bar">
    <div class="button">
      A
    </div>
    <div class="button-menu">
      <ul>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
      </ul>
    </div>
</div>

现在，我的问题是子元素“ button-menu”的内容没有扩展到其内容，因为它是绝对父元素。但是我无法从父级删除该位置。

还有其他解决方案可以实现我想要的一切吗？

要求：

需要能够将父级“浮动栏”放置在屏幕上的任何位置，并且应该将其放置在其他所有内容的顶部。
“按钮菜单”子项也应出现在所有内容的顶部，将其自身放置在“按钮”的底部，内容应扩展到最大宽度200px；
< / li>

Answer 1

您可以使用样式width:max-content来获得所需的容器全宽。

.floating-bar {
  position: absolute;
  z-index: 1;
  background-color: lightblue;
  height: 50px;
  padding: 5px;
}
.button-menu {
  max-width: 200px;
  background-color: yellow;
  padding: 10px;
  position: absolute;
  z-index: 2;
  display: none;
  width: max-content;
  width: -moz-max-content;
}
.button {
  background-color: blue;
  color: white;
  width: 35px;
  height: 50px;
}
.button:hover + .button-menu {
    display: block;
}

<div class="floating-bar">
    <div class="button">A</div>
    <div class="button-menu">
      <ul>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
      </ul>
    </div>
</div>

Answer 2

简单地使浮动条具有较大的宽度。因为这是绝对要素，所以您不会有任何问题。

.floating-bar {
  position: absolute;
  z-index: 1;
  /*color only the needed part*/
  background: linear-gradient(lightblue,lightblue) left/45px 100% no-repeat;
  height: 50px;
  padding: 5px;
  width:200px; /*control the max-width here*/
}

.button-menu {
  max-width: 100%;
  background-color: yellow;
  padding: 10px;
  position: absolute;
  z-index: 2;
  display: none;
}

.button {
  background-color: blue;
  color: white;
  width: 35px;
  height: 50px;
}

.button:hover + .button-menu {
    display: block;
}

<div class="floating-bar">
    <div class="button">
      A
    </div>
    <div class="button-menu">
      <ul>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
        <li>Lorem ipsm dolor sit amet</li>
      </ul>
    </div>
</div>

绝对子代不会扩展到绝对父代内部的内容大小

2 个答案: