Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

overflow:hidden и абсолютное позиционирование

Задача скрыть блоки по горизонтали (с появлением scroll), которые не помещаются по ширине. У блоков есть псевдоэлемент ::before с position: absolute. Так вот при свойстве overflow-x: scroll эти элементы обрезаются сверху. А нужно что бы они были видны.
ol { margin: 0; padding: 0; list-style-type: none; /* Убираем исходные маркеры */ counter-reset: num; /* Задаём имя счетчика */ width: 100px; white-space:nowrap; border:1px solid black; overflow-y:visible; overflow-x:scroll; } li { display: inline-block; position: relative; width: 50px; height: 50px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); margin-right: 5px; } li::before { content: counter(num) ' '; /* Выводим число */ counter-increment: num; /* Увеличиваем значение счётчика */ color: black; font-style: bold; font-size: 25px; position: absolute; top:-15px; }



Ответ

div { border:1px solid black; width: 100px; } ul { margin: -15px 0 0 0; padding: 15px 0 0 0; list-style-type: none; /* Убираем исходные маркеры */ counter-reset: num; /* Задаём имя счетчика */ white-space:nowrap; overflow-y:visible; overflow-x:scroll; } li { display: inline-block; position: relative; width: 50px; height: 50px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); margin-right: 5px; } li::before { content: counter(num) ' '; /* Выводим число */ counter-increment: num; /* Увеличиваем значение счётчика */ color: black; font-style: bold; font-size: 25px; position: absolute; top:-15px; } Some text goes here...

Some text goes here...

Комментариев нет:

Отправить комментарий