CSS 在一切之上显示跨度

debugcn 发表于 Dev

花园

我需要一个工具提示来显示在其父项之上。我尝试设置 z-index 和 overflow 值，但无法获得所需的结果。将鼠标悬停在红色框上时会出现工具提示。预期结果：工具提示字段显示在顶部，因此左侧（和底部）不在父项下方，并且子项不能越界（滚动功能需要保持完整）。

.parent {
    position: relative;
    float: left;
    margin-left: 30px;
    width: 380px;
    text-align: left;
    height: 380px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 2px solid #f4f4f4;
    border-radius: 2px;
}

.child-container {
    text-align: center;
    border-radius: 2px;
    border-color: transparent;
    font-weight: normal;
    font-size: 12px;
    width: 80%;
/*    width: calc((100% - 83px) / 3);*/
    margin: 20px 10px 10px 15px;
    vertical-align: top;
    display: inline-block;
}

.header {
    padding: 10px;
    background-color: #e6e6e6;
    border: 1pt solid #ccc;
    border-radius: 2px;
}

label {
    color: #757575;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 0;
    display: block;
}

.info {
    border: 0;
    height: 15px;
    text-align: right;
    position: relative;
}

.info:hover .tooltip {
    display: block;
}

.img {
    display: inline-block;
    height: 15px;
    width: 15px;
    background: red;
}

.tooltip {
    width: 300px;
    text-align: center;
    color: white;
    background: #00c853;
    position: absolute;
    left: 50%;
    z-index: 100;
    padding: 5px;
    font-size: 14px;
    border-radius: 2px;
    display: none;
    top: 150%;
    margin-left: -150px;
}

.tooltip.top:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #00c853;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    border-top-color: transparent;
    border-bottom: 10px solid #00c853;
    top: -20px;
    bottom: auto;
}

<div class="parent">
    <div class="child-container" style="display: inline-block;">
        <div class="header">MY HEADER</div>

        <div style="width:100%;margin:10px 10px 10px 0;text-align:left;">
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>
        </div>
    </div>
</div>

希拉尔·瓦多达里亚

如果我理解你的问题，基本上你想让你的工具提示移到右侧，这样它就不会隐藏你在左侧的列表，以及你在那里提供的滚动。以下是您可以进行的一些 CSS 更改以实现相同的目的：

.tooltip {
    width: 250px;
    text-align: center;
    color: white;
    background: #00c853;
    position: absolute;
    left: 0;
    z-index: 100;
    padding: 5px;
    font-size: 14px;
    border-radius: 2px;
    display: none;
    top: 150%;
    margin-left: 0;
}
.tooltip.top:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #00c853;
    content: '';
    position: absolute;
    left: 11px;
    bottom: -10px;
    margin-left: -10px;
    border-top-color: transparent;
    border-bottom: 7px solid #00c853;
    top: -14px;
    bottom: auto;
}

另外，请删除<span class="tooltip top">HTML 中给出的内联样式。

您可以在此处查看jsfiddle 中更新的代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。