0

我想在元素的右上角制作一个可选数据，以在元素的右上角显示类似工具提示。但是我在定位它时遇到了问题，因为元素（容器）和工具提示（偏移子项）都可能包含可变数量的数据，并且如果数据过多，则可以动态缩放。

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

职位

我对“可变”维度没有影响 - 浏览器将它们流动以自动包含数据。我希望能够指定“设置”距离并使其保持不变，无论由于内容可变，框如何自动缩放。

我可以用纯 CSS 实现这一点吗？如果是这样，怎么做？（'top', 'bottom', 'left' 和 'right' 都定位在 offset child 的左上角。如何让左下角成为“handle”？）

4

2 回答 2

3

这是一种方法：

考虑这个 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/

于 2013-04-23T11:55:06.353 回答
0

你想要这样的东西：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

于 2013-04-23T11:26:44.367 回答