CSS: Position fixed внутри блока

  • 28 июля 2017
  • 3613
0%

Помогло?

Иногда требуется сделать так, чтобы элемент принимал 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. 

Сообщения: (0)

?
Публикуя сообщение, вы соглашаетесь с пользовательским соглашением

Читайте также