CSS позиции абсолютная чистота без скрыта другим элемент

Question

Моей проблемы является базой на этом изображении:

Как вы видите на картинке выше, некоторые из моих хелперов числа (SPAN) становятся обрезанными (большая зеленая стрелка).

Итак, я пробовал использовать 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>

Пожалуйста, помогите.

Update 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

Возможно, это не случай расслоения (z-index), но случай обрезки. Родительский контейнер может иметь на нем overflow:hidden и, следовательно, отображает часть, которую вы не видите. Это просто предположение, но стоит взглянуть на него. Если страница является общедоступной, разделяя связь было бы очень полезно для определения фактической проблемы

EDIT: Как и ожидалось, на вас самой высокой эмиссии breadcrumb класс имеет переполнение: скрытый, вы можете изменить его на:

.breadcumb { 
    display: inline-block; 
} 

И ваша проблема правой колонки может быть решена с помощью того же метода (удалить атрибут переполнения, добавить атрибут отображения):

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

Answer 2

Изменение 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); 
}