1. Relative positioning
1. Concept
- The box can be adjusted relative to its original position, that is, relative positioning
- Essence:
Relatively positioned elements will leave a hole in the original position, that is, the element is still in the original position, but it is rendered in a new place and will not have any impact on other elements on the page
2. Grammar
position: relative;
3. Examples
- First, set a div box with a p tag inside, and design the corresponding style:
code:
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
border: 1px solid gray;
margin: 20px auto;
}
p{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
result:
- Next, set relative positioning for the p tag and move the position
Code:
Result:
The box corresponding to the p tag will move relative to the original position
- Remove the relative positioning of the p tag, and add h tags and ul tags in the div box
code:
result:
- Set relative positioning for the p tag and move the position:
code:
Result:
The position of the block corresponding to the p tag is moved, but the original position is still there and has not been replaced by other elements, so the relative positioning does not deviate from the standard flow
4. Purpose: fine-tuning elements
- First, set a navigation bar with 8 a tags in it, and carry out corresponding style design, including: remove the small dots in the list, remove the underline of a tag, remove the default page margin, the size and color of elements, etc.
code:
<!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>Document</title>
<style>
/* 初始化 */
*{
margin: 0;
padding: 0;
}
/* 去掉列表前面的标记符号 */
li {
list-style: none;
}
nav{
width: 960px;
height: 40px;
border: 1px solid gray;
/* 水平居中 */
margin: 50px auto;
}
li{
float: left;
width: 120px;
height: 40px;
/* 文字居中 */
text-align: center;
line-height: 40px;
}
/* 将a标签转成块级元素，才能设置宽高 */
a{
display: block;
width: 120px;
height: 40px;
background-color: green;
/* 让文字颜色变成白色 */
color: white;
/* 去掉下划线 */
text-decoration-line: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
<li><a href="">栏目</a></li>
</ul>
</nav>
</body>
</html>
result:
Among them, the width and height can only be set by converting the a tag into a block-level element
- Next, set the hover attribute on the a tag, and add a top border when the mouse moves to the a tag:
code:
/* a标签被触摸时，添加一个上边框 */
a:hover{
border-top: 5px solid white;
/* 鼠标触摸，背景颜色改变 */
background-color: organge;
}
Result:
You can see that when the mouse moves to the corresponding column (a label), the background color changes and an upper border appears
- However, due to the increase of the upper border, its position will cause the area where the a label is located to move down, which is not very beautiful. Therefore, relative positioning can be used to fine-tune the area where the a label is located upwards:
code:
Result:
You can see that the border moves up:
2. Absolute positioning
1. Concept
- The box accurately describes the position in the form of coordinates in the browser, and has its own absolute position
- The webpage can be regarded as a rectangular coordinate system, and the coordinates of the box in the webpage are absolute coordinates
- Absolutely positioned elements break away from the standard document flow and will release their position without any interference with other elements, but instead cover them
2. Grammar
position: absolute;
3. Examples
- First, construct 3 boxes:
code:
<!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>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.box3{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
result:
- Absolute positioning and corresponding movement of box2 (green square):
Result:
After absolutely positioning and moving the position of box2, the original position of box2 will not be preserved, but will be replaced by box3, so the absolutely positioned element is out of the standard document flow
- Absolutely positioned elements do not interfere with other elements
For example, we add three li tags:
Code:
Result:
The newly added li tag will be displayed close to box3 (blue square)
- Add content inside the label
Code:
Result:
Absolutely positioned box2 (green square) does not interfere with other elements, but covers them. It can be considered that the green box has been completely floated from the original document.
4. Absolutely positioned reference box (children and fathers)
(1) Concept
- Absolutely positioned boxes are not always based on the browser
- Absolutely positioned boxes will use the closest box with relative positioning attributes among their ancestor elements as the reference point, that is, "children and fathers"
(2) Examples
- Draw 3 div boxes and a p tag, and nest
the code:
<!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>Document</title>
<style>
/* 初始化 */
*{
margin: 0;
padding: 0;
/* 添加该属性，盒子的width和height即盒子的实际大小，会根据padding和border的值来调整content的值*/
/* box-sizing: border-box; */
}
.box1{
width: 402px;
height: 402px;
border: 1px solid gray;
padding: 50px;
margin: 0 auto;
}
.box2{
width: 300px;
height: 300px;
padding: 50px;
border: 1px solid gray;
}
.box3{
width: 198px;
height: 198px;
padding: 50px;
border: 1px solid gray;
}
p{
/* p标签天生是有margin的，要提前去掉 */
width: 50px;
height: 50px;background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>
</p>
</div>
</div>
</div>
</body>
</html>
result:
- Set absolute positioning for the innermost p tag:
code:
result:
- If you want the p tag to move with box3 as the reference point, you need to set relative positioning for box3:
code:
Result:
At this time, the third box is equivalent to the coordinate axis of the p label
- If the relative positioning of the third box is removed, the relative positioning is added to box2
code:
Result:
At this time, box No. 2 is equivalent to the coordinate axis of the p label
5. Absolutely positioned boxes are vertically centered
(1) Concept
- To center the box horizontally, use:
margin: 0 auto;
- Absolutely positioned boxes are vertically centered with:
position: absolute;
top: 50%;
margin-top: -自己高度的一半;
(2) Examples
- There is a p tag inside a div box, the outer div box is set to relative positioning, the inner p tag is set to absolute positioning, and the absolutely positioned p tag is centered horizontally and vertically:
code:
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 300px;
border: 1px solid gray;
/* 水平居中 */
margin: 40px auto;
position: relative;
}
p{
width: 80px;
height: 80px;
background-color: red;
position: absolute;
/* 垂直居中 */
top: 50%;
margin-top: -40px;
/* 水平居中 */
left: 50%;
margin-left: -40px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
result:
5、z-index
- Absolute positioning can be combined with the z-index attribute to achieve cover and mask effects
- Example:
Set 2 boxes, both of which are set to absolute positioning, and perform corresponding position offsets:
Result:
Box2 (blue square) written later will cover box1 (red square).
If box2 is written first, box2 (blue square) will be covered by box1
- You can use the z-index attribute to determine who is covered by whom, so you don't have to adjust the writing position of the label
- The value of z-index is an integer without a unit, and a box with a large value can suppress a box with a small value
- For example, if we want the blue box to press the red box, we might as well set the z-index value of the blue box to 99, and the z-index value of the red box to 9:
result:
3. Fixed positioning
1. Grammar:
position: fixed;
2. Concept
- No matter how the page is scrolled, the element will always be fixed at the required position
- Fixed positioning can only use the browser page as a reference point, breaking away from the standard document flow
- Purpose: return to the top, floor navigation, etc.
3. Examples
- Example 1:
Place a square in the upper left corner of the page and fix it
Result:
No matter how the navigation bar is pulled, the position of the square relative to the page is always the same
- Example 2:
Insert multiple pictures on the page, and set a square at the bottom right of the page and fix the position:
<!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>Document</title>
<script src="./js/echarts.min.js"></script>
<style>
.box{
position: fixed;
width: 200px;
height: 200px;
background-color: orange;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>
<img src="./img/1.jpg" alt="">
</p>
<p>
<img src="./img/1.jpg" alt="">
</p>
<p>
<img src="./img/1.jpg" alt="">
</p>
<p>
<img src="./img/1.jpg" alt="">
</p>
<p>
<img src="./img/1.jpg" alt="">
</p>
</body>
</html>
Result:
No matter how the navigation bar is scrolled, there is always a square in the lower right corner. Using this principle, the square in the lower right corner can be set as a navigation button, so that you can return to the top of the page at any time. When the navigation bar scrolls, the position of the square remains unchanged
:
