A must-read for zero basics of HTML - getting started with HTML, programming is so simple
Chapter 11: position positioning attribute
1. Understand the position attribute
1.1 What is positioning
The positioning postionattribute allows us to remove the element from the document flow, and then use the location word attribute ( left top right bottom) to accurately control its position. Different positioning attribute values can give elements different presentation forms.
1.2 Five values of position attribute
The five values of the position attribute specify the positioning type of the element:
- static static positioning (default value, no positioning)
- relative relative positioning
- absolute absolute positioning
- fixed fixed positioning
- sticky sticky positioning
2. Positioning classification
2.1 Static positioning position: static;
Static positioning: no positioning meaning, the default attribute of positioning. Ignore the orientation value (top left right bottom) and level can not be used
2.2 Relative positioning position: relative;
- It will not break away from the document flow, and the original position will be retained;
- Move relative to its original position. Move with its upper left corner as the base point;
- Adjust the position through the orientation attributes: top left right bottom, orientation value: px percentage, etc. The default value is auto, not 0;
- If the moved position overlaps with other boxes, the other boxes will be covered.
<style>
.div1 {
width: 200px;
height: 100px;
background-color: red;
}
.div2 {
/* 相对定位：参照的是自己本身原本的位置 */
position: relative;
/* 相对自己原本位置，距离左边空出50px，所以可以理解为是向右移动50px
left:50px等价于right:50px */
left: 50px;
width: 200px;
height: 100px;
background-color: green;
}
.div3 {
/* 相对定位 */
position: relative;
/* 相对自己原本位置，距离右边边空出50px，所以可以理解为是向左移动50px
right:50px等价于lfet:-50px */
right: 50px;
width: 200px;
height: 100px;
background-color: blue;
}
.div4 {
/* 相对定位 */
position: relative;
top: 100px;
width: 200px;
height: 100px;
background-color: pink;
}
/* 相对定位：不会脱离文档流，自身位置偏移后，原本位置会保留，后面其他元素不会占据它原本的位置 */
.div5 {
/* 没写 position属性，默认就是static。static默认值，没有定位*/
width: 400px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1">我是正常位置的盒子div1</div>
<div class="div2">相对我自己div2正常位置距离左边空出的距离，可以理解为向右移动</div>
<div class="div3">相对我自己div3正常位置距离右边空出的距离，可以理解为向左移动</div>
<div class="div4">我是盒子4，我移动后的位置和其他盒子有重叠的话，我会覆盖其他盒子，但是我的原本位置会得到保留，没有人敢占据</div>
<div class="div5">我是盒子5，我没写 position属性，默认就是static。static默认值，没有定位</div>
</body>
Rendering:
2.3 Absolute positioning position: absolute;
- It breaks away from the document flow and takes off on the spot. The original position is no longer retained. Other elements will occupy its original position and move with the orientation value.
- Move with reference to the nearest parent and position relative to the parent. The premise is that its parent element has positioning set. If there is no positioning written in the parent page, the default reference is to the browser, which is the upper left corner of its ancestor, and the movement is based on the upper left corner of the browser.
That is to say, if its parent element has positioning set, then it will be positioned relative to its parent element. If its parent element does not have positioning set, then it depends on whether its grandparent element has positioning set. If not, Just refer to the browser for positioning and movement.
- Adjust the position through the orientation attributes: top left right bottom
Orientation value: px/percentage, etc. The default value is auto instead of 0
<style>
.father1{
/* 父级有设置相对定位属性 */
position: relative;
width: 300px;
height: 300px;
background-color: red;
margin: auto;
}
.son1{
/* 绝对定位：参照物是设置有定位属性的最近的父级元素
子级使用绝对定位属性的前提是：父级有设置定位属性，子级设置的绝对定位属性才能参照父元素生效 */
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background-color: pink;
margin: auto;
}
.box1{
width: 250px;
height: 250px;
background-color: yellow;
}
.father2{
/* 父级没有设置定位属性 */
width: 300px;
height: 300px;
background-color: green;
margin: auto;
}
.son2{
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background-color: pink;
margin: auto;
}
.box2{
width: 250px;
height: 250px;
background-color: yellow;
}
.father3{
/* 父级有设置定位属性 */
position: absolute;
top: 600px;
left: 400px;
width: 300px;
height: 300px;
background-color: blue;
margin: auto;
}
.son3{
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background-color: pink;
margin: auto;
}
.box3{
width: 250px;
height: 250px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father1">
<div class="son1">
我是儿子1，我设置了绝对定位，我的父级元素红色盒子，设置了相对定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
</div>
<div class="box1">
</div>
</div>
<div class="father2">
<div class="son3">
我是儿子2，我设置了绝对定位，我的父级元素绿色盒子，没有设置定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
</div>
<div class="box3">
</div>
</div>
<div class="father3">
<div class="son3">
我是儿子3，我设置了绝对定位，我的父级元素蓝色盒子，设置了绝对定位属性。我脱离了文档流，我的下一个元素黄盒子占据了我的原本位置
</div>
<div class="box3">
</div>
</div>
</body>
Rendering:
Characteristics of absolute positioning:
1. Margin: auto alone will be ineffective --> See Chapter 4. Method 1 for explanation.
2. If you can’t find the nearest parent relative positioning, you will search the browser.
3. Use the child absolute parent phase (parent phase child absolute) in conjunction with our relative positioning.
4. Change the original properties of the element label. The element width and height default to 0
5 . The width percentage inherits the relative positioning width of the previous parent instead of inheriting the width of its structural parent
6. Note: the orientation attributes left and top have higher priority than right and bottom
Change the original properties of the element label. The element width and height default to 0:
<style>
span{
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
p{
position: absolute;
height: 100px;
background-color: red;
}
</style>
<span>我是行内span元素 ，我设置了绝对定位属性后，改变了我原本的特性，我就可以支持宽高设置了</span>
<!-- <p>我是块级元素p，我设置了绝对定位属性后，改变了我原本的特性，我的宽度变成了由我的内容撑开了</p> -->
Rendering:
The width percentage inherits the relative positioning width of the previous parent instead of inheriting the width of its structural parent; the
orientation attributes left and top have higher priority than right and bottom.
<style>
.box {
/* position: relative; */
width: 500px;
height: 400px;
background-color: red;
}
.son {
/*宽度百分比 继承上一个父级的相对定位的宽度 而不是继承它结构上的父级宽度
子元素son设置宽度设置100%，son的父级是box，如果父级没有设置定位属性的话，所以它就再往上找，找到浏览器做参照，所以此时就继承浏览器的宽度 ，而不是继承它结构上的父级box宽度。如果它的父级box设置了定位属性，它就会继承父级的宽度*/
position: absolute;
/* 方位属性 left和top 优先级比 right和bottom 高 */
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 200px;
background-color: green;
}
</style>
<div class="box">
<div class="son">111</div>
</div>
2.4 Fixed positioning position: fixed;
- Will not scroll with your scroll bar;
- It is separated from the document flow and does not take up space. The following elements will occupy its position and be obscured by it;
- Reference object = browser window to move the position (it has nothing to do with the parent, only the browser window (window view) is used to move)
fixed positioning - Element width and height default to 0
- margin:auto invalid
2.5 Sticky positioning position: sticky;
- It does not break away from the document flow, and subsequent elements will not be obscured by it.
- In the future, js will be used to complete the ceiling effect.
<style>
.header{
/* 固定定位 */
/* position: fixed; */
/* 粘性定位 */
position: sticky;
top: 0px;
width: 100%;
height: 70px;
background-color: #222;
color: white;
}
.wrap{
width: 1000px;
height: 500px;
border: 2px solid red;
margin: 20px auto;
}
.nav-right{
position: fixed;
top: 200px;
right: 0px;
width: 100px;
height: 500px;
background-color: #096;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="wrap">
我是内容盒子 容器
</div>
<div class="wrap">
我是内容盒子 容器
</div>
<div class="wrap">
我是内容盒子 容器
</div>
<div class="wrap">
我是内容盒子 容器
</div>
<div class="nav-right">
右侧导航
</div>
</body>
Fixed positioning rendering: The header and right navigation are fixed and will not scroll as the scroll bar scrolls.
Since it is separated from the document flow, the top line of text in the content area will occupy the position of the header, thus being obscured by the header.
Sticky positioning rendering: The header and right navigation are fixed and will not scroll as the scroll bar scrolls.
It is separated from the document flow, so the top line of text in the content area does not occupy the head position and can be seen.
3. Positioning level z-index
When multiple boxes overlap, the later one comes first by default, and often the last overlapping element will be displayed. At this time, we can specify the order in which they are stacked through the z-index attribute.
- z-index: level, the default level is 0
- Value: The larger the value, the higher the priority of the level.
Generally, a positive number is used to increase the level of the specified element. Of course, a negative number can also be used to lower the level. Whether it is a positive number or a negative number, the larger the value, the higher the level. - Note: At the z-index level, this attribute will only take effect when used with elements that have positioning attributes. If other boxes do not have positioning attributes set, it will not take effect. Default positioning cannot be used either.
These were originally 4 ordinary boxes:
Now add an absolute positioning to each of these four boxes, and add a relative positioning to their parent box. We found that these four boxes were separated from the document flow and overlapped. Since it’s the latecomers who come first, we only see box 4:
At this time, you can specify the order in which they are stacked through the z-index attribute. For example, I want the second box to appear first in the stacking order: .list>.son1{z-index: 1;,
4. Use positioning to center the element within the parent
- method one:
/*关键属性
绝对定位加上四个方位属性一个都不能少
*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
- Method Two:
/*关键属性*/
position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;
This is why the margin:auto mentioned in 2.3 Absolute Positioning Features above cannot be used alone, and it will be ineffective if used alone.
<style>
.wrap{
/* position: relative; */
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto;
width:500px;
height: 500px;
background-color: red;
}
.box{
/* 第一种 */
/* position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto; */
/* 第二种 */
position: absolute;
top: 50%;
left: 50%;
/* 负自身宽度的一半 */
margin-left: -150px;
/* 负自身高度的一半 */
margin-top: -150px;
width: 300px;
height: 300px;
background-color: springgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
Rendering:
Summarize
The above is the positioning attribute compiled by the editor for everyone. It explains the five types of positioning in more detail. It also adds the positioning level and the method of centering the positioning element in the parent to make a more detailed explanation based on relevant cases. explain. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.