Question

我正在尝试创建一个工具提示元素，其最小宽度为50px，最大宽度为200px。我将工具提示元素放置在另一个元素内，以便在父对象上发生悬停事件时可以轻松控制工具提示出现或消失的时间。

我遇到的问题是，即使我指定子项（工具提示）具有绝对位置，工具提示元素的宽度也似乎由父项的宽度控制。

let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
  b = !b;
  let w = 10;
  if( b ) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000 );

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  position: relative;
  transition: width 2s;
}

#tooltip {
  position: absolute;
  top: calc( 100% + 5px );
  left: 5px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="parent">
  <div id="tooltip">
    My long tooltip text that wraps to multiple lines as needed.
  </div>
</div>

在此示例中，我希望工具提示（黄色div）的大小保持在200像素，但是我们可以看到，当父对象更改宽度时，工具提示宽度也会更改。为什么？

是否可以解决此问题？

说明：在此示例中：https://codepen.io/anon/pen/ePPWER，我们看到工具提示文本看起来很漂亮。当父级更改宽度时，我不希望工具提示的div更改其宽度，因为它会迫使工具提示文本换行到2行，这是不希望的。

Answer 1

如果我们检查与to the width of absolutely positioned element相关的规范，我们可以阅读以下内容：

'width'和'right'为'auto'而'left'不是'auto'，则宽度为fit-fit。然后解决“正确”的问题

因此，在您的情况下，元素的宽度会缩小以适合：

收缩配合宽度的计算类似于计算   使用自动表格布局算法的表格单元格的宽度。   大致：通过格式化内容来计算首选宽度   除了在出现明显的换行符的地方不换行，   并例如通过尝试所有   可能的换行符。 CSS 2.1并未定义确切的算法。   第三，计算可用宽度：   将“ left”（在情况1中）或“ right”（在情况3中）设置为0后的“ width”。

然后缩小至适合宽度为：min（max（首选最小宽度，    可用宽度），首选宽度）。

为简便起见，并且不考虑最小/最大宽度，元素的宽度将尝试适应内容，而不会超出其父容器（包含块）的宽度。通过添加最小/最大宽度，您只需添加更多约束。

一种修复方法是从父元素中删除positon:relative，以使其不再是position:absolute元素（it will be the initial containing block）的包含块，其宽度足以避免可用宽度约束）。

然后使用边距代替顶部/左侧来控制位置：

let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
  b = !b;
  let w = 10;
  if( b ) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000 );

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  transition: width 2s;
}

#tooltip {
  position: absolute;
  margin-top: 30px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="parent">
  <div id="tooltip">
    My long tooltip text that wraps to multiple lines as needed.
  </div>
</div>

Answer 2

ID工具提示在“父级”下使用。当父母的宽度改变时，它也提示工具提示的总宽度改变了。由于您已经使用过mix-width和max-width，它将一直扩展到达到max-width。如果要固定它，则只需使用宽度即可。

Answer 3

这是因为.parent有一个position: relative。这将使所有孩子（包括position: absolute）受父div的约束。

不确定这是否对您有用，因为它是将tooltip从父级中拉出，并用span将其自身包装起来。另外，您需要将parent更改为relative，否则会持续影响孩子。

let p = document.getElementById('parent');
let b = true;
setInterval(() => {
  b = !b;
  let w = 10;
  if (b) {
    w = 300;
  }
  p.style.width = `${w}px`
}, 5000);

#parent {
  background-color: cyan;
  width: 100px;
  height: 25px;
  transition: width 2s;
  position: relative;
}

#root {
  position: relative;
}

#tooltip {
  width: 100%;
}

#tooltip span {
  position: absolute;
  top: calc( 100% + 5px);
  left: 5px;
  min-width: 50px;
  max-width: 200px;
  background-color: yellow;
  padding: 5px;
  border: 1px solid black;
}

<div id="root">
  <div id="parent"></div>
  <div id="tooltip">
    <span>My long tooltip text that wraps to multiple lines as needed.</span>
  </div>
</div>

为什么父元素的宽度改变时子元素的宽度也会改变？

3 个答案: