绝对子项未延伸到绝对父项内的内容大小

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>

现在我的问题是子元素“按钮菜单”的内容没有延伸到它的内容，因为它是绝对的父元素。但我不能从父母那里删除那个定位。

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

要求：

1. 需要能够将父“浮动条”定位在屏幕上的任何位置，并且应将其置于其他所有内容之上。
2. 孩子，“按钮菜单”也应该出现在所有内容的顶部，将自己定位在“按钮”的底部，内容应该延伸到它的最大宽度为200px;

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>