CSS响应式浮动工具提示 - 不可能？

Question

我试图在纯css中制作工具提示,我希望它们能够响应,这意味着它们应该漂浮在里面,左侧没有空间,例如,它们应该显示在右侧或顶部或底部.

我正在尝试这样的事情

小提琴

span {
  position: relative;
}
div {
  margin: 150px 100px 50px 50px;
  border: 1px solid Black;
  height: 100px;
}
left,
right,
bottom,
top {
  position: absolute;
  background: black;
  color: white;
  max-width: 90px;
}
left {
  left: 0;
}
right {
  right: 0;
}
bottom {
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
}
top {
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}

<span>
<div>
    <top>
        TOP
    </top>
    
    <bottom>
        BOTTOM
    </bottom>
    
    <right>
        RIGHT
    </right>
    
    <left>
        LEFT
    </left>
</div>
</span>

但它确实不起作用.

真正的问题是我无法为父元素设置固定宽度,因为它们必须适应任何父元素.

我想知道这是否仍然可以在纯CSS中,但看起来我必须在javascript中计算一切...

Answer 1

据我了解，您做得很好，但您只是忘记了您的父元素是内联元素（<span>），因此您必须将其设置display:inline-block/block为才能工作。

来自MDN

HTML（超文本标记语言）元素通常是“内联”元素或“块级”元素。内联元素仅占据由定义内联元素的标签界定的空间。元素

以下元素是“内联”的：

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

因此，考虑到这一点，你的小提琴将是这样的：

片段

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

span {
  position: relative;
  display: block
}
div {
  margin: 150px 100px 50px 50px;
  border: 1px solid Black;
  height: 100px;
}
left,
right,
bottom,
top {
  position: absolute;
  background: black;
  color: white;
  max-width: 90px;
}
left {
  left: 0;
}
right {
  right: 0;
}
bottom {
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
}
top {
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}

注意：使用上面的代码片段，left/right子级将脱离div父级（无需margin对其进行更改），我不确定这是否是您想要的。

所以另一个选择（如果你想将它们保留在div父级中）是设置divwithposition:relative

因此，在您的小提琴中只需添加我们就可以得到以下结果：

片段：

<span>
<div>
    <top>
        TOP
    </top>
    
    <bottom>
        BOTTOM
    </bottom>
    
    <right>
        RIGHT
    </right>
    
    <left>
        LEFT
    </left>
</div>
</span>

div {
  margin: 150px 100px 50px 50px;
  border: 1px solid Black;
  height: 100px;
  position: relative
}
left,
right,
bottom,
top {
  position: absolute;
  background: black;
  color: white;
  max-width: 90px;
}
left {
  left: 0;
}
right {
  right: 0;
}
bottom {
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
}
top {
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}