Question

我的问题是基于这张图片：

正如您在上图中看到的那样，我的一些帮助号码（跨度）正在被裁剪（绿色大箭头）。

所以我尝试使用 z-index：100000; 将所有这些内容都用完，但结果并不像我预期的那样。

每个链接标记必须包含一个帮助程序编号（span），但每个用户都应该可以看到该编号。我正在使用 javascript 来做到这一点，但我遇到了 CSS 的问题。

我的代码块是：

.breadcumb li a {
    font-size: 16px;
    color: #00c0c5;
    text-transform: uppercase;
}[data-talktochrome] {
    position: relative !important;
}.bstalktochrome {
    border-radius: 50%;
    font-size: 9px;
    padding: 2px;
    font-weight: bold;
    max-width: 40px;
    position: absolute !important;
    top: -10px !important;
    left: 0px !important;
    line-height: normal;
    z-index: 100000;
    background-color: rgba(255, 0, 0, 0.24);
}

<ul class="breadcumb">
<li><a href="http://*.vn" title="" data-talktochrome="153"><span class="bstalktochrome">153</span>Nhịp sống số</a></li>
<li><a href="http://*.vn/tin/thi-truong" title="" data-talktochrome="154"><span class="bstalktochrome">154</span>Thị trường</a></li>
</ul>

请帮忙。

更新1： 测试页面为：http://nhipsongso.tuoitre.vn/tin/thi-truong/20150924/iphone-6s-va-6s-plus-ve-vn-som-gia-cao/974668.html

但是还没有帮助号码（span）

要显示帮助号码（范围），您应该打开浏览器的控制台面板并运行以下代码：

        sohientai = 1
        $("body").append("<style>.bstalktochrome_btn {display:none}.bstalktochrome {border-radius:50%; font-size: 9px;padding: 2px;font-weight: bold;max-width: 40px;position: absolute !important;top: -10px !important;left: 0px !important;line-height: normal;z-index:100000;background-color: rgba(255, 0, 0, 0.24);} [data-talktochrome]{position:relative !important;} </style>")
        $("a").each(function(){
            $(this).prepend('<span class="bstalktochrome">'+sohientai+'</span>')
            $(this).attr("data-talktochrome", sohientai)
            sohientai++
        })

Answer 1

更改CSS，如下所示

.breadcumb li
{ padding-top:15px
}


.breadcumb li a {
    font-size: 16px;
    color: #00c0c5;
    text-transform: uppercase;
}[data-talktochrome] {
    position: relative !important;
}.bstalktochrome {
    border-radius: 50%;
    font-size: 9px;
    padding: 2px;
    font-weight: bold;
    max-width: 40px;
    position: absolute !important;
    top: -12px !important;
    left: 0px !important;
    line-height: normal;
    z-index: 100000;
    background-color: rgba(255, 0, 0, 0.24);
}

Answer 2

它可能不是分层（z-index）的情况，而是裁剪的情况。父容器上可能有overflow:hidden，因此会裁剪出您无法看到的部分。这只是一个猜测，但值得一看。如果页面是公开的，共享链接对确定实际问题非常有帮助

编辑：正如预期的那样，在您最重要的问题上，breadcrumb类已溢出：隐藏，您可以将其更改为：

.breadcumb {
    display: inline-block;
}

你的右栏问题可以用同样的方法解决（删除溢出属性，添加显示属性）：

.bl-ar {
    display: inline-block;
    line-height: 16px;
    padding-bottom: 7px;
}

CSS位置绝对跨度，不被其他元素隐藏

2 个答案: