Понимание свойства позиции CSS и его работы. Пример
При использовании HTML для создания веб-страниц элементы по умолчанию располагаются друг за другом вертикально. Вы всегда будете хотеть добавить стили, чтобы либо изменить макет вашей страницы, либо организовать ее элементы так, чтобы элементы можно было расположить горизонтально на вашем экране. Это возможно с CSS flexbox и CSS grid . Однако для создания потрясающих веб-страниц требуется больше.
Свойство CSS position заполняет пробелы, позволяя вам создать асимметричную веб-страницу, на которой вы можете размещать элементы HTML в любом месте, отделяя каждый элемент от обычного потока и других элементов, делая вашу веб-страницу более привлекательной и удобной для навигации. .
В этой статье вы узнаете, что означает свойство CSS position, как оно работает, какие существуют значения и как они могут помочь вам правильно расположить элементы на веб-странице.
Что такое свойство позиции CSS?
Как следует из названия, свойство CSS position используется для позиционирования элемента на веб-странице. Он определяет и позволяет вам взять элемент из обычного макета потока вашей веб-страницы и расположить его там, где вы хотите, используя другие свойства CSS, такие как 9.0003 сверху , справа , снизу и слева .
Свойство position имеет пять значений, которые выполняют разные функции, и все они предназначены для помощи в расположении элементов. В этой статье объясняется, как работают эти значения и чем они отличаются, что поможет вам понять, где и когда использовать конкретное значение.
Для начала давайте воспользуемся родительским div с пятью элементами div и абзацем для идентификации каждого div :
<дел>
Это первый контейнер
<дел>
Это второй контейнер
<дел>
Это третий контейнер
<дел>
Это четвертый контейнер
<дел>
Это контейнер номер пять
Язык кода: HTML, XML (xml)
Давайте стилизуем эти элементы div так, чтобы они выглядели следующим образом.
Пять дивов с текстом Это контейнер One to Four , оформленный в разных цветах.
Статическая позиция CSS
Статическая позиция CSS — это значение по умолчанию для свойства position . Это позиция элементов HTML по умолчанию. Это значение position означает, что элемент будет следовать в соответствии с обычным потоком страницы и будет следовать стандартным правилам позиционирования, как и ожидалось, с использованием стилей CSS или без них.
Это означает, что когда вы не применяете свойство position к элементу, он становится static , то есть большинство элементов, с которыми вы работаете, позиционируются статически. На них не влияют свойства top , right , bottom , left и z-index .
В приведенном ниже примере позиция static применяется ко второму контейнеру div , но вы заметите, что это не влияет на вывод элемента.
.контейнер2 {
цвет фона: #7f0df4;
положение: статичное;
}
Язык кода: CSS (css)
Пять блоков Это контейнер в статическом положении.
Ничего интересного в этом значении позиции нет, но стоит знать, что оно существует 🙂. Давайте рассмотрим другие значения положения, которые изменяют положение элемента по сравнению с положением по умолчанию.
Относительная позиция CSS
Относительная позиция CSS используется для позиционирования элемента в соответствии с обычным потоком веб-страницы. Само по себе это значение позиции ничего не делает. Например, если вы примените положение
относительно к третьему контейнеру div .
. container3 {
цвет фона: #ce4dcd;
положение: родственник;
}
Язык кода: CSS (css)
Элемент и все элементы на веб-странице не будут изменены, потому что он работает так же, как статическое значение , но имеет больше преимуществ.
Само по себе относительное положение не влияет на отображение каждого элемента.
Преимущество использования этого свойства заключается в том, что оно дает вам доступ к свойствам направления, которые вы можете использовать для перемещения любого элемента, не влияя на положение смещения относительный позиционированный элемент. Эти свойства направления включают верх , лево , право , низ и z-index . Например, вы можете переместить элемент вниз и вправо со свойствами сверху и слева .
Это контейнер Three перекрывается с Это контейнер Четыре блока .
Вы заметите, что смещение не влияет на окружающие элементы, потому что пространство, которое изначально занимает элемент, остается пустым. В этот момент вы можете начать задавать себе вопрос об использовании позиции относительно позиции
.
Удивительно, но это не особенно полезно, потому что вы хотите избежать ситуации, в которой другие элементы не затронуты. Это значение позиции можно использовать для установки z-индекса или указания порядка стека элемента, или его можно использовать в качестве контейнера для «абсолютно» позиционированного элемента.
Например, в предыдущем примере третий элемент укладывается поверх четвертого. Добавление z-index к четвертому элементу не даст никакого эффекта, но добавление относительной позиции позволит вам расположить элемент поверх третьего.
.container4 {
цвет фона: #ef74ff;
положение: родственник;
z-индекс: 1;
}
Язык кода: CSS (css)
Элементы располагаются стопкой в каждом порядке в результате z-индекса собственность.
Абсолютная позиция CSS
Абсолютная позиция используется для удаления элемента из обычного потока веб-страницы и последующего позиционирования его относительно ближайшего позиционированного предка элемента (любой элемент со значением позиции, отличным от static ) .
Когда элемент имеет абсолютную позицию, элементы вокруг него ведут себя так, как будто этот элемент не существует на веб-странице. В зависимости от того, как элементы были ранее расположены, элемент остается один поверх другого и сворачивает доступное пространство.
. контейнер2 {
цвет фона: #7f0df4;
положение: абсолютное;
}
Язык кода: CSS (css)
Абсолютное значение позиции приводит к тому, что третий элемент занимает место второго.
В предыдущем примере третий элемент занимает место второго элемента, оставляя второй элемент задержаться. Вы также заметите, что элемент больше не имеет полной ширины. Это связано с тем, что абсолютных позиционированных элемента имеют ширину, установленную на авто .
Абсолютно определенный элемент теперь можно позиционировать с помощью свойств направления, таких как сверху , слева , справа и снизу . Также важно понимать, что этот элемент будет расположен ближе всего к предку. Это означает, что родительский контейнер должен быть относительным, чтобы служить позиционным предком.
Поскольку верхняя и левая позиции были установлены в качестве начальной точки, элемент теперь расположен в верхней части контейнера. Вы можете использовать это, чтобы разместить элемент в центре или в определенном месте на вашем веб-сайте.
Если для родительского контейнера не задана относительная позиция , элемент будет расположен в верхнем левом углу следующего расположенного предка, который теперь является телом всей страницы.
Это контейнер Два перемещается за пределы блоков элементов.
Фиксированная позиция CSS
Как следует из названия, эта фиксированная позиция используется для фиксации элемента в определенной позиции вашей веб-страницы. Он удаляет элемент из обычного потока веб-страницы и позиционирует его относительно области просмотра (часть документа, видимая в вашем браузере), а не ближайшего позиционированного предка как абсолютного.
.container4 {
цвет фона: #ef74ff;
положение: фиксированное;
}
Язык кода: CSS (css)
Четвертый элемент в блоке-контейнере исправлен.
Вы будете использовать свойства направления, чтобы указать положение, в котором должен располагаться элемент.
Четвертый элемент контейнера зафиксирован и перемещен за пределы родительского контейнера.
В основном используется, когда вы хотите переместить кнопку в нижнюю часть страницы, например, кнопка прокрутки вверх . Вы можете использовать фиксированное положение, если вы также хотите зафиксировать панель навигации в верхней части экрана веб-страницы.
Когда вы позиционируете фиксируемый элемент, он остается в этом положении, даже если вы прокручиваете страницу, отличая его от абсолютного положения. Он также не оставляет пустого места, как это делает относительная позиция.
GIF-файл, показывающий четвертый контейнер, закрепленный на странице при прокрутке родительского контейнера.
Липкое положение CSS
Липкая позиция очень хороша. Это комбинация статических и фиксированных позиций. Это связано с тем, что элемент будет оставаться в обычном потоке веб-страницы при прокрутке до тех пор, пока не достигнет указанной позиции, после чего он становится фиксированным.
В приведенном выше примере все элементы будут прокручиваться нормально, пока третий элемент не достигнет вершины родительского элемента. Потом прилипает. Он ведет себя как статический элемент, пока не достигнет указанной позиции; затем он фиксируется и, кажется, прилипает к этому месту.
Страница перемещается эластичным образом после прокрутки.
ℹ️ Чтобы липкое позиционирование работало, необходимо указать хотя бы одно из свойств сверху, справа, снизу или слева.
Это идеально, когда у вас есть панель навигации, расположенная после вашего главного раздела, и вы хотели бы придерживаться верхней части, когда пользователь прокручивает до верхней части экрана. Кроме того, если у вас есть список элементов с отдельными заголовками, которые вы хотите прикрепить при прокрутке пользователем, вы можете добиться этого с помощью фиксированной позиции.
На рисунке показаны все значения свойства position .
Вот демонстрация, показывающая использование всех значений позиций.
Различие между свойством position и системами компоновки CSS
Флексбокс и сетка CSS — это системы компоновки, которые можно использовать для определения базовых и сложных компоновок. Но вы не можете размещать эти элементы где угодно, потому что вы ограничены основной (X) и поперечной (Y) осями.
Иллюстрация того, как системы CSS flexbox и grid layout упорядочивают элементы на веб-странице.
С помощью свойства CSS position вы можете разместить свой контент в любом месте, отделив каждый элемент от других элементов. Другими словами, вы можете свободно перемещать элементы по экрану, поскольку вы не ограничены какой-либо осью.
Свойство CSS position отсоединяет каждый элемент и может быть размещено где угодно.
Подведение итогов
В этой статье вы узнали о свойстве position, о том, как оно работает, и о его различных значениях. Вы также узнали о различиях между этими значениями, поэтому знаете, когда использовать конкретное свойство позиции CSS и его значение.
Получайте удовольствие от программирования!
Я Джоэл Олаванле, разработчик внешнего интерфейса и технический писатель, заинтересованный в том, чтобы сделать Интернет доступным для всех, всегда ища способы отблагодарить техническое сообщество. Подпишитесь на меня и свяжитесь со мной по телефону Twitter .
Позиция CSS — W3schools
на
Чтобы указать позицию элемента, используется свойство CSS position. Это полезно для размещения элемента позади другого. Он также находит свое применение в эффекте анимации по сценарию. Свойства top, bottom, left и right могут использоваться после свойства position для установки позиции элемента.
Статическое позиционирование CSS:
Будучи позицией по умолчанию, она позиционирует HTML-элемент в соответствии с обычным потоком страницы, и свойства top, bottom, left и right не влияют на это.
В приведенном выше примере мы показали эффект статического позиционирования CSS.
Фиксированное позиционирование CSS:
Чтобы текст оставался фиксированным относительно окна браузера, используется свойство фиксированного позиционирования. Этот фиксированный текст не перемещается даже при прокрутке окна.
В приведенном выше примере мы отобразили относительное положение CSS.
Абсолютное позиционирование CSS:
Относительно первого родительского элемента с позицией, отличной от статической, мы можем позиционировать элемент HTML с помощью абсолютного позиционирования CSS. Таким образом, мы можем разместить элемент в любом месте страницы. Содержащий блок — это HTML, если такого элемента нет.
Он определяет и позволяет вам взять элемент из обычного макета потока вашей веб-страницы и расположить его там, где вы хотите, используя другие свойства CSS, такие как 9.0003 сверху , 
container3 {
цвет фона: #ce4dcd;
положение: родственник;
} 
container3 {
цвет фона: #ce4dcd;
положение: родственник;
верх: 50 пикселей;
слева: 40 пикселей;
} 
контейнер2 {
цвет фона: #7f0df4;
положение: абсолютное;
} 
parent-контейнер {
// ...
цвет фона: #ddd;
граница: 2px сплошная #000;
положение: родственник;
}
.контейнер2 {
цвет фона: #7f0df4;
положение: абсолютное;
сверху: 0;
слева: 0;
} 
Он удаляет элемент из обычного потока веб-страницы и позиционирует его относительно области просмотра (часть документа, видимая в вашем браузере), а не ближайшего позиционированного предка как абсолютного.
container3 {
цвет фона: #ce4dcd;
положение: липкое;
сверху: 0;
} 
Вы также узнали о различиях между этими значениями, поэтому знаете, когда использовать конкретное свойство позиции CSS и его значение.
