使用绝对定位时无法使最大宽度工作

Question

使用绝对定位时，我无法让max-width 工作。在https://jsfiddle.net/jn2bs6ax/ 中，项目的宽度应尽可能小，最大宽度为 1000 像素。但它占用了大约 50% 的宽度并包裹了文本。如何让它发挥作用？如果我将最大宽度设置为像 300 像素这样的小值，它可以工作，但任何大于它当前宽度的东西都不会导致它扩展。

这个例子只显示了一个绝对定位到中心下面一个项目的项目，但我使用transform、top、bottom、left和right来相对于项目在所有 4 个方向上定位事物。该解决方案应该适用于所有 4 种情况。

有一个类似的问题CSS (position:absolute + left:50% = max-width:50%)?，但答案仅适用于下方居中，但不适用于所有情况，例如定位到垂直居中的项目右侧。

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

css

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 100%;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Answer 1

尝试设置display: inline-table;或display: table;

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-table;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

Answer 2

尝试在任何地方沿最大宽度为您的班级添加width: 100%;。

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 1000px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
</div>

Answer 3

正如您已经注意到的，该问题与 left:50% 有关，它将元素的宽度限制为父元素的 50%。

克服这个问题的一个hacky方法是通过添加更多填充来增加父元素的宽度，因为绝对元素会考虑填充框。然后添加负边距以纠正添加的填充。您应该只注意溢出：

.relative {
  position: relative;
  padding:0 50%;
  margin:0 -50%;
}

.absolute {
  position: absolute;
  background-color: grey;
  max-width: 800px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


.hide {
 overflow:hidden;
 height:500px;
}

<div class="hide">
<div class="relative">
  text
  <div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
  text
  <div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div>
</div>
</div>