绝对的孩子不伸展到绝对父母内部的内容大小

Question

也有类似的问题，但它们都没有帮助我。

我有两个divs。一个孩子（菜单）和父母（浮动条）。它们都绝对定位。

场景是，这是一个动态出现在屏幕不同部分的浮栏，必须在其他所有方面堆叠，因此为什么给出了父母的位置绝对。

孩子是一个菜单列表，也应该出现在其他每个元素的顶部，将其大小适合其内容，并在悬停在兄弟姐妹上时出现，这是浮动工具栏上的一个按钮。

.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>

现在，我的问题是儿童元素"按钮menu"的内容由于绝对是父母而没有伸展到其内容。但是我无法从父母那里删除该定位。

还有另一个解决我想要的一切的解决方案吗？

要求：

1. 需要能够在屏幕上的任何位置都放置父母的"浮动式"，并且应将其放在其他所有内容的顶部。

2. 孩子"纽扣 - 菜单"也应出现在所有内容的顶部，将自己定位在"按钮"的底部，内容应延伸至200px的最大宽度；

   <</p>

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>