Html 将跨度放置在相对父对象上方

我正试图定位一个跨度，使其位于其兄弟节点之上，并“悬空”，或位于其父节点之上。父对象是相对定位的

请查看我的图片以了解整个情况

它现在看起来像什么

这就是我想要的样子。。。

范围（工具提示）：

父元素：

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（工具提示）挂在表单上？

在

.ui对话框上。ui对话框内容

DIV只需将溢出从自动更改为可见，如果您在类

网格窗口span.验证消息
中手动设置
宽度
，则会有帮助它会像你想要的那样挂在边缘上。您只需将消息保持足够短，以确保适当的安装。
我仅对CSS和HTML（类名）进行了一些小的更改，就解决了您的问题

您可以通过更新的fiddle查看结果：

我为每个跨度添加了一个不同的类，并仅将此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;
}

我不能说我同意你对整个事情的编码方式。
将你的
.grid window.control group.controls设置为
位置：相对则只有您的绝对定位
.grid窗口span。验证消息
将按您的需要工作

请参见

更新
你想成为你的刀尖宽度变量，所以我替换了
位置：绝对至<代码>位置：相对网格窗口span.验证消息中添加代码>并添加
左：175px；顶部：-25px；浮动：左和
最小宽度：0；最大宽度：500px宽度：自动；也行。让它按你想要的那样工作。注意浮动是必须的，否则它将不起作用

因此，主要的变化（最重要的部分）是
float:left；位置：相对位置
到
网格窗口span.验证消息
并且您不需要声明
位置：相对到
网格窗口。控制组。控制

如果您可以使用额外的元素，请参见
这里有一个解决方案，我经常用于这种定位：
HTML:

线索是创建一个零大小的参考点（验证消息包装器）将其定位在您想要的位置，然后将元素定位到与之相关的位置

这是一个有效的演示：

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

 .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工具提示插件（），它非常易于使用和实现。
我已经按照指示进行了更新，但它仍然不会重叠表单本身并“挂起”表单。它挂在头球上，虽然很好，但不是很好。这是我更新问题的最新资料。看来我不清楚我要做什么。啊！我懂了。挂起“关闭”对话框窗口。如果您手动设置该
span
的宽度为
width:50%它会像你想要的那样挂在边缘上。你只需要把信息保持得足够短，以确保合适的设备。我会修改我的答案。这种方法很有效。有没有一种方法可以在不指定宽度的情况下执行此操作？工具提示中的文本长度可变。您还应更新答案，以反映将父div的
溢出
更改为可见。我想你已经知道了，大多数html/css/类都来自jQueryUI，但是工具提示是我创建的。你说你不同意它是如何编码的，你能解释一下你将如何实现这一点吗？因为大多数html/css都来自jQueryUI，那么我收回这一点。只是小提琴中的代码看起来杂乱无章，不必要的规则，等等。通过比较更新后的提琴，您已经可以看到我刚刚从规则中删除的内容。由于时间的消耗，我无法为您重新编写。但我仍然需要设置宽度。理想情况下，我希望不必设置宽度，或者至少设置最大宽度，以便工具提示大小可变并适合其内部文本。@bflemi3您不需要设置宽度，宽度设置为演示版的唯一原因是您在示例中设置了它。但是，如果我从
.grid window span.validation message
中删除宽度，则工具提示最多可收缩约50px。试试看。。。
<div class="validation-message-wrapper">
<span class="validation-message" style="">Please enter a number</span>
</div>

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

 .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;
}