В последнее время изучая знания, связанные с CSS, позиционирование является одной из трудностей. Не разбираясь в деталях, он иногда создает беспорядок при его использовании. В этой статье организовано конкретное понимание и применение атрибутов позиционирования.
1. Введение
1. Документооборот
Прежде чем вводить пост, необходимо разобраться с документооборотом.
Проще говоря, это процесс определения расположения элементов в соответствии с их позиционным порядком в HTML. Механизм компоновки HTML основан на модели потока документов, то есть блочный элемент (block) имеет собственную строку, а строчный элемент (inline) не занимает отдельной строки.
Как правило, поле используется для разделения пространства между элементами и элементами, а заполнение используется для разделения пространства между элементами и содержимым. Поля используются для макета, чтобы отделить элементы, чтобы элементы не были связаны друг с другом; отступы используются для промежутка между элементами и содержимым, чтобы было «расстояние» между содержимым (текстом) и (обтеканием) элементами.
Пока они не выложены в плавающем и абсолютном позиционировании, все они находятся в потоке документов.
Производительность выглядит следующим образом:
<div style="border:1px solid black">div1</div>
<div style="border:1px solid red">div2</div>
这是一张图片
<img src="test.png">2. Знакомство с атрибутом position
- статический, значение по умолчанию. Элемент, позиция которого установлена как статическая, всегда будет находиться в позиции, заданной потоком документа.
- inherit указывает, что значение свойства position должно быть унаследовано от родительского элемента. Но любая версия Internet Explorer (включая IE8) не поддерживает значение свойства «наследовать».
- fixed, генерирует абсолютно позиционированные элементы. По умолчанию может располагаться по адресуотносительно окна браузерауказанные координаты. Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу». Элемент остается в этом положении независимо от того, прокручивается окно или нет. Но когда элемент-предок имеет атрибут преобразования и не равен нулю, он будетотносительно элемента-предкаУкажите координаты, а не окно браузера.
- absolute, который генерирует абсолютно позиционированный элемент,относительно ближайшего предка элементанайти. Положение этого элемента можно указать с помощью свойств «слева», «сверху», «справа» и «снизу».
- относительный, генерирует относительно позиционированный элемент,Расположите элемент относительно его исходного положения в документе. Используйте свойства «left», «top», «right» и «bottom», чтобы установить смещение этого элемента относительно его собственного положения.
Независимо от того, какое позиционирование, должна быть ссылка. Найти нужный референс — половина дела.
2. Относительное расположение
relativeСоздает относительно позиционированный элемент, расположенный относительно его нормального положения.
Процесс относительного позиционирования выглядит следующим образом:
- Элемент генерируется по умолчанию (статический) (и элемент плавает, как слой).
- Относительно предыдущего движения позиции направление и величина движения определяются свойствами left, right, top, bottom, а позиция до смещения остается неизменной.
пример
<style type="text/css">
#box1 {
margin: 20px;
width: 200px;
height: 200px;
background-color: yellow;
}
#box2 {
margin: 20px;
width: 200px;
height: 200px;
background-color: red;
/*position: relative;
left: 100px;
top: 100px;*/
}
</style>
<div id="box1"></div>
<div id="box2"></div>Прежде чем код комментария в блоке 2 вступит в силу, он сортируется и представляется в соответствии с потоком документов.
Однако когда код комментария раскомментирован, он перемещается относительно того места, где он должен отображаться в потоке документа.
Таким образом, ссылка для относительного позиционирования является самой собой.
3. Абсолютное позиционирование
Большая разница между абсолютным позиционированием и относительным позиционированием заключается в том, что когда мы устанавливаем для элемента абсолютное позиционирование, тоЭтот элемент будет изъят из документооборота, другие элементы будут считать, что элемент не существует в потоке документов, и займут его исходное положение. Абсолютно позиционированный элемент перемещает свою позицию в соответствии со своей ссылкой, которая определяется в соответствии с настройками позиционирования его предков.
Так называемое определение, основанное на настройках позиционирования его элементов-предков, понимается просто как: относительно ближайшего позиционированного элемента-предка элемента, если ни один элемент-предок не установил позиционирование, то эталонным объектом является слой тела.
пример
Используйте рисунок выше, чтобы продемонстрировать свойства абсолютного позиционирования. Видно, что самый внутренний слой — это два ящика, а снаружи вложены два слоя элементов-предков.
1. Элемент-предок не позиционирован
Используйте absolute, когда элемент-предок не позиционирован.
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
top: 30px;
left: 30px;
}В данном случае ссылкой является тело.
2. Элементы-предки имеют позиционирование
Пока для элемента-предка установлено значение, отличное от position:static, он считается позиционированным, и ближайший элемент-предок будет установлен как ссылка на абсолютно позиционированный элемент.
#orange {
width: 400px;
height: 400px;
background-color: orange;
position: absolute;
}
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
top: 30px;
left: 220px;
}В этом случае ссылкой является ближайший элемент-предок.
В дополнение к двум вышеприведенным случаям, если пользователь не установил левый/правый, верхний/нижний для абсолютного элемента, соответствующая ссылка изменится.
3. Левый/правый, верхний/нижний не заданы
При отсутствии слева/справа, сверху/снизу позиция абсолютного элемента является позицией элемента в потоке документов
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
}На приведенном выше рисунке видно, что два поля перекрываются, потому что: абсолютный элемент позиционируется в соответствии с позицией, в которой он должен появиться в потоке документа, потому что левое/правое и верхнее/нижнее не установлены, в то время как абсолютный элемент элемент отделяется от потока документа, а красный элемент Box, не зная о существовании абсолютного элемента, продолжает размещаться в этой позиции, а абсолютный элемент перезаписывает элемент в обычном потоке документа.
4. Резюме
В основном он представляет относительное позиционирование и абсолютное позиционирование.Другие методы позиционирования относительно просты, и вы узнаете об этом после того, как попробуете. Кроме того, применение относительного позиционирования и абсолютного позиционирования также является более гибким и подходит для различных сценариев.