CSS: Position fixed внутри блока
Иногда требуется сделать так, чтобы элемент принимал position:fixed внутри блока. Проблема в том, что если мы задаем данное свойство, то оно начинает действовать на всю область окна, а это не всегда то, что нужно.
Представьте ситуацию: у вас есть модальное окошко, а внутри стрелка "перейти на следующую картинку". Изображение настолько большое, что приходится использовать скролл. Если бы стрелка была задана как
.arrow{
position:absolute;
top:50%;
}
то это бы не решило нашей проблемы, так как стрелка отцентрировалась бы на всю высоту картинки. Находясь в врехней части, она вряд ли была нам заметна. На помощь приходит знание о том, что position:fixed может работать относительно элемента в котором находится (если мы не используем значения для left; right). Поэтому получается, если мы внутри нашего arrow создадим еще один блок inner-arrow, то сможем задать позиционирование по правому краю.
.inner-arrow{
position:absolute;
right:0;
width:50px;
height:100%;
}Теперь внутри этого блока мы можем создать наш элемент с position:fixed, назовем его fixed-arrow
.fixed-arrow{
position:fixed;
top:50%;
margin-top:-25px;
width:50px;
height:50px;
background:#c11;
}Теперь мы можем не переживать за нашу стрелку, которая будет всегда справа, несмотря на высоту объекта, который мы будем прокручивать!
Облако тегов
Следующая статья
NGINX - создание виртуальных хостов
Всем привет! Сегодняшний урок посвящен теме,без которой практически невозможно начать разработку сайта - это настройка web-сервера и виртуальных хостов. В качестве операционной системе мы будем использовать Ubuntu, а web-сервера - nginx.
