Question

我正在尝试定位一个跨度，以便它将位于它的兄弟之上并“悬挂”或位于其父级之上。父母是相对定位的。

请查看我的fiddle以了解全貌

目前看起来像......

enter image description here

这就是我希望它看起来像...... enter image description here

跨度（工具提示）：

.grid-window span.validation-message:after {
    border-color: #F2DEDE transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 40px;
    width: 0;
}
.grid-window span.validation-message {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    height: 20px;
    left: 263px;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    top: -26px;
    width: 100px;
}

父元素：

element.style {
    display: block;
    height: auto;
    left: 488px;
    outline: 0 none;
    top: 100px;
    width: 400px;
    z-index: 1002;
}
.ui-dialog {
    overflow: visible;
    padding: 0.2em;
    position: absolute;
    width: 300px;
}

更新

正如Rohrbs所建议的，如果我明确设置了span的宽度（工具提示），那么它确实会挂在表单上。但这不实用，因为每个工具提示都可能显示不同的消息。所以现在我的问题变成了 - 如何将宽度设置为动态并且仍然将span（工具提示）挂在表单上？

Answer 1

如果您手动将班级width中的.grid-window span.validation-message设置为width: 50%;，它会像您想要的那样悬挂在边缘上。您只需将信息保持足够短以确保正确装配。

Answer 2

将.grid-window .control-group .controls设为position: relative;，然后只有您的绝对定位.grid-window span.validation-message能够正常使用。

参见 This Fiddle

<强>更新您希望成为工具提示宽度变量，因此我已将position: absolute;替换为position: relative;中的.grid-window span.validation-message并添加了left: 175px; top: -25px; float: left;以及min-width: 0; max-width: 500px; width：auto;也工作。使你的工作符合你的要求。注意浮动是必须的，否则它将无法工作。

因此，主要更改（最重要的部分）为float: left; position: relative;到.grid-window span.validation-message，您也无需将position: relative;声明为.grid-window .control-group .controls < / p>

参见 This Fiddle

Answer 3

在.ui-dialog .ui-dialog-content DIV上只需将溢出从自动更改为可见，这将有助于

Answer 4

我设法通过对CSS和HTML（类名）进行微小更改来解决您的问题。

您可以通过更新的小提琴看到结果：http://jsfiddle.net/aNkSw/16/

我为每个跨度添加了一个不同的类，并仅将此CSS位调整为：

.grid-window span.validation-message-id:after, .grid-window span.validation-message-name:after {
    border-color: #F2DEDE transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    bottom: -16px;
    left: 10px;
}
.grid-window span.validation-message-id {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
    padding: 10px;
    position: absolute;
    margin: -81px 0 0 0;
    left: 292px;
    z-index: 99;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    width: 200px;
}
.grid-window span.validation-message-name {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
    padding: 10px;
    position: absolute;
    margin: -41px 0 0 0;
    left: 292px;
    z-index: 99;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    width: 200px;
}

我不能说我同意你对整个事情的编码方式。

Answer 5

如果你可以使用额外的元素这是一个解决方案，我会使用很多这种定位： HTML：

<div class="validation-message-wrapper">
<span class="validation-message" style="">Please enter a number</span>
</div>

CSS：

.validation-message-wrapper {
    width:0;
    position: absolute;
    right: 70px;
    top: 0;
    height: 0;
}

线索是在您想要的位置创建一个零大小的参考点（.validation-message-wrapper）位置，然后将元素相对于它定位。

这是一个有效的演示：DEMO

我还做了一些其他的小改动，只是为了调整一下：

 .ui-dialog .ui-dialog-titlebar {
    padding: 0.4em 1em;
    position: relative;
}

.grid-window span.validation-message:after {
    border-color: #F2DEDE transparent transparent;
    border-style: solid;
    border-width: 8px;
    content:"";
    height: 0;
    left: 0;
    bottom: -16px;
    position: absolute;
    width: 0;
}
.grid-window span.validation-message {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    height: auto;
    left: 0px;
    bottom: 0;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    margin-top: -40px;
    width: 200px;
}

我希望有所帮助。

如果您想要更通用的东西，我已经制作了一个jQuery工具提示插件（tipy），它非常易于使用和实现。

位置跨越以挂起相对父级

5 个答案: