Привет.
Я использую CSS3 Multiple Columns. Дочерние элементы колонок имеют position: relative, а внутри них могут быть стрелки с position:absolute.
Проблема: CSS колонка обрезает стрелку с абсолютным позиционированием.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПривет.
Я использую CSS3 Multiple Columns. Дочерние элементы колонок имеют position: relative, а внутри них могут быть стрелки с position:absolute.
Проблема: CSS колонка обрезает стрелку с абсолютным позиционированием.
Добавьте z-index: 1
к .countArrow
как вариант
Правка:
Немного изучил это странное поведение. Я так понимаю, что это баг всех хромибраузеров, и корректно в данном плане css3 мультиколонки работают только в firefox.
Баг репорт - https://code.google.com/p/chromium/issues/detail?id=84030
Другой пример бага с первой буквой - http://jsfiddle.net/5tX4A/4/
Все, что выходит за пределы колонки, обрезается как-будто действует свойство overflow: hidden;
Советую вам просто переверстать список более привычными методами и не углубляться в это.
Вложи в подсказку элемент с position:fixed и z-index'ом и помести всё внутрь него.
https://jsfiddle.net/k4ucr72h/3/
<div class="countArrow"><div>Найдено <span>6700 товаров</span></div></div>
.countArrow {
position: absolute;
top:-7.5px;
left: 100%;
margin-left: 15px;
height: 30px;
line-height: 30px;
}
.countArrow div{
position: fixed;
color: #fff;
background: #36363d;
padding: 0px 10px 0 5px;
z-index: 10;
...
UPDATE: Я не прав. Это работает только если нет скролла. Иначе получается фигня...
Решение есть на англоязычном stackoverflow. Добавлением в элементы списка свойства
break-inside: avoid;
backface-visibility: hidden;
Не забудь добавить префиксы, по сути проблему решает только backface-visibility Так что можно обойтись только им.
В причинах я не разбирался, времени нет, но если кто знает будет интересно узнать