0

Привет.

Я использую CSS3 Multiple Columns. Дочерние элементы колонок имеют position: relative, а внутри них могут быть стрелки с position:absolute.

Проблема: CSS колонка обрезает стрелку с абсолютным позиционированием.

https://jsfiddle.net/k4ucr72h/

3 ответа 3

0

Добавьте z-index: 1 к .countArrow как вариант

Правка:

Немного изучил это странное поведение. Я так понимаю, что это баг всех хромибраузеров, и корректно в данном плане css3 мультиколонки работают только в firefox.

Баг репорт - https://code.google.com/p/chromium/issues/detail?id=84030

Другой пример бага с первой буквой - http://jsfiddle.net/5tX4A/4/

Все, что выходит за пределы колонки, обрезается как-будто действует свойство overflow: hidden;

Советую вам просто переверстать список более привычными методами и не углубляться в это.

4
0

Вложи в подсказку элемент с position:fixed и z-index'ом и помести всё внутрь него.
https://jsfiddle.net/k4ucr72h/3/

<div class="countArrow"><div>Найдено&nbsp;<span>6700&nbsp;товаров</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: Я не прав. Это работает только если нет скролла. Иначе получается фигня...

0

Решение есть на англоязычном stackoverflow. Добавлением в элементы списка свойства

break-inside: avoid;
backface-visibility: hidden;

Не забудь добавить префиксы, по сути проблему решает только backface-visibility Так что можно обойтись только им.

В причинах я не разбирался, времени нет, но если кто знает будет интересно узнать

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.