CSS абсолютное позиционирование (абсолютное), относительное позиционирование (относительное) методы (подробное объяснение)

Несколько часто используемых методов позиционирования в CSS прямо на галантерее!

Что такое позиционирование?

Элементы можно позиционировать, используя свойства top, bottom, left и right. Однако эти свойства не будут работать, если сначала не установить

свойство положения. Они также работают по-разному, в зависимости от метода таргетинга.

Атрибут position указывает тип позиционирования элемента,  который используется для указания того, как элемент позиционируется в документе.

Атрибуты:

• относительное относительное позиционирование
• абсолютное абсолютное позиционирование
• фиксированное    фиксированное позиционирование
• липкое   липкое позиционирование
• Элементы, значения атрибутов которых соответствуют четырем выше, называются элементами позиционирования.
• static Значение атрибута по умолчанию не является элементом позиционирования, если значение атрибута является статическим.

При позиционировании мы определяем положение позиционирующего элемента с помощью четырех атрибутов: верхний правый нижний левый.

Относительное позиционирование: позиция: относительное

При относительном позиционировании позиционирующий элемент позиционируется в соответствии с его исходным положением. Относительное позиционирование не оторвется от потока документа и не повлияет на другие элементы в потоке документа. Смещение основано на заданном значении, и значение может быть отрицательным;

•   top Чем больше значение, тем ниже верх Разница между верхом и исходной позицией
•   Чем больше значение дна, тем выше разница между дном и исходным положением.
•   Чем больше значение left, тем правее разница между левой и исходной позицией.
•   Чем больше значение ight, тем больше разница в левом, правом и исходном положении.

 Возможности Занять исходную позицию, занять позицию в документообороте.

Абсолютное позиционирование: position:absolute

При абсолютном позиционировании базой позиционирования является родительский элемент позиционирующего элемента, пока не будет найден элемент body, абсолютно позиционированный элемент оторвется от потока документа, а ширина и высота могут быть заданы в строке, а блочный элемент не занимает ни одной строки, а ширина и высота расширяются за счет содержимого;

• top Чем больше значение, тем меньше разница между вершиной и вершиной позиционирующего родителя.
• дно Чем больше значение, тем выше разница между нижним и нижним краем позиционирующего родителя.
• Чем больше значение левого, тем больше правого.Разница между левым и левым позиционированием родителя
• right Чем больше значение, тем левее разница между правой и правой сторонами позиционирующего родителя.

Возможности Вне документооборота 

Фиксированное позиционирование: положение: фиксированное

Позиционирование в соответствии с положением и размером окна браузера, положение элемента не будет меняться при прокрутке содержимого экрана, а фиксированно позиционированный элемент будет перемещаться из потока документа;

• top Положение относительно верхнего края окна
• нижняя позиция в соответствии с нижней частью окна
• левое положение в соответствии с левой стороной окна
• right Положение в соответствии с правой стороной окна

Липкое позиционирование: position:sticky

Липкое позиционирование можно рассматривать как смесь относительного позиционирования и фиксированного позиционирования: элемент относительно позиционируется до пересечения порога и фиксируется после этого;

.stickyElement {

            ширина: 100%;

            высота: 30 пикселей;

            цвет фона: #FFFFAA;

            положение: липкое;

            верх: 10 пикселей;

        }

 особенность:

Прежде чем элемент прокрутится менее чем на 10 пикселей от верхней части окна, элемент позиционируется относительно, а затем элемент будет зафиксирован в положении, где верхняя часть составляет 10 пикселей, пока окно не будет отброшено.

Прикрепленное позиционирование — это недавно добавленный контент CSS3, который может не поддерживаться старыми браузерами.

расширение:

z-индекс z-ось

Порядок отображения элементов

Значение является положительным целым числом

 случай:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        body{
            margin: 0;
        }
        .relativeElement{
            position:relative;
            width: 300px;
            height: 300px;
            background-color: #FFAAAA;
            z-index: 2;
        }
        .normalElement{
            width: 300px;
            height: 900px;
            background-color: #AAFFAA;
           
        }
        .absoluteElement{
            width: 100px;
            height: 100px;
            background-color: #AAAAFF;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
        }
        .fixedElement{
            width: 100%;
            height: 30px;
            background-color: #FFFFAA;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
        }
        .stickyElement{
            width: 100%;
            height: 30px;
            background-color: #FFFFAA;
            position: sticky;
            top: 10px;
        }
    </style>
</head>
<body>
 <div class="relativeElement">
        <span class="absoluteElement"></span>
        <div style="width:100px;height:100px;background-color:#AAFFAA;z-index: 9;position: absolute;"></div>
       
     </div>
     <div class="stickyElement">粘性导航条</div>
     <div class="normalElement">
        <!-- <div class="absoluteElement"></div> -->
     </div>
     <div class="normalElement" style="background-color: #AAFFFF"></div>
     <!-- <div class="fixedElement">导航条——吸顶导航</div> -->
</body>
</html>

Спешите, лайкните, соберите и запустите!