相对于右上角的父角和自己的左下角定位可伸缩元素

Question

我想在一个元素上创建一个可选数据，在元素的右上角显示工具提示。我有定位它的问题，因为元素（容器）和工具提示（偏移子）可能包含可变数量的数据，并且如果数据太多，则允许动态缩放。

下图显示了我想要实现的目标：

我对“变量”维度没有影响 - 浏览器会将它们自动包含在内。我希望能够指定“设置”距离并保持不变，无论盒子如何因内容变化而自动缩放。

我可以使用纯CSS实现这一目标吗？如果是这样，怎么样？ （'top'，'bottom'，'left'和'right'都位于偏移子项的左上角。如何将左下角设为“句柄”？）

Answer 1

这是一种方法：

考虑这个HTML结构：

<div class="wrapper">
    <div class="parent">Lorem ipsum dolor sit amet...
        <div class="child">Aliquam convallis rhoncus lacus...</div>
    </div>
</div>

和这个CSS样式：

.wrapper {
    outline: 2px dotted blue;
    width: 500px;
    height: 400px;
    padding-top: 200px;
}
.parent {
    position: relative;
    background-color: green;
}
.child {
    position: absolute;
    bottom: 100%;
    left: 100%;
    margin: 0 0 20px 20px;
    background-color: yellow;
}

.wrapper只是为了演示目的而提供布局上下文。

对于父元素，请使用position: relative。对于孩子，使用position: absolute并将左/下角放置在100％，这对应于父框的右上角（无论其大小）。

要控制偏移量，请调整子元素的边距。

这是非常标准的CSS 2.1所以它应该适用于所有浏览器。

小提琴参考：http://jsfiddle.net/audetwebdesign/6LTh4/

Answer 2

你想要这样的东西：http://jsfiddle.net/cyjJq/

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
    position: absolute;
    width: 20%;
    height: 20%;
    top: 100px;
    left: 75px;
    background-color: green;
}
.child{
    position: absolute;
    width: 60%;
    height: 40%;
    top: -40%;/*same as height*/
    left: 100%;/*entire width of containing div*/
    background-color: yellow;
}

如果您想让孩子离得更远，只需减少top /增加left