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 Так что можно обойтись только им.

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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