In-depth study of how to use positioning in CSS (summary)
|
Introduction to Positioning in CSS There are |
| Property Value | describe |
|---|---|
| fixed | Set fixed positioning. |
| relative | Set relative positioning. |
| absolute | Set absolute positioning. |
Fixed positioning practice
Before practicing fixed positioning, let's take a look at what the code structure looks like.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color:springgreen;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1 class="box"></h1>
<div></div>
</body>
</html>Result Plot
Now I will set the h1 element to fixed position to see how it differs from the above structural practice, and then we will analyze some of the characteristics of fixed positioning.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
position:fixed;
width: 100px;
height: 100px;
background-color: red;
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color:springgreen;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1 class="box"></h1>
<div></div>
</body>
</html>Result Plot
The fixed positioning characteristics are analyzed as follows:
- Fixed positioning is set relative to the browser window. No matter how the page is scrolled, the position of the fixed-positioned element will not be affected.
- Characteristics of fixed positioning elements: It has been separated from the standard document flow.
- Characteristics of fixed-position elements: Its hierarchy is higher than elements in the standard document flow, so when we set fixed positioning for the h1 tag, it will overlap the div tag.
- Features of fixed positioning elements: The h1 tag is above the div tag, so the fixed positioning element no longer takes up any space
Relative positioning practice
Before practicing relative positioning, let's take a look at what the code structure looks like.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
Now I will set class attribute value of .div2 element to relative positioning to see the difference from the above structural practice, and then we will analyze some characteristics of relative positioning.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
position: relative;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
Note: If we don't set the coordinate position for relative positioning, it will not move at all.
The author sets the positioning coordinates for the div2 element with class attribute value.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
position: relative;
left: 50px;
top: 50px;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
The relative positioning characteristics are analyzed as follows:
- Relative positioned elements do not break away from the standard document flow.
- If no coordinates are set for a relatively positioned element it will remain in place.
- The relatively positioned element sets the coordinate position, and it will start calculating the moving position based on the original position.
- Relatively positioned elements are at a higher level than the elements in the standard document flow and will cover the elements in the standard document flow.
- For relatively positioned elements it can be set to a negative value.
Absolute positioning practice
Before practicing absolute positioning, let's take a look at what the code structure looks like.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
Now I will set class attribute value of .div2 element to absolute positioning to see the difference from the above structural practice, and then we will analyze some characteristics of absolute positioning.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
position:absolute;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
Note: Absolute positioning is out of the standard document flow.
The author sets the positioning coordinates for the div2 element with a class attribute value. In order to give readers an intuitive impression, I set the center alignment for the outermost div element.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
margin: 0px auto;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
position:absolute;
left:0px ;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
Note: Why do absolutely positioned elements appear on the left edge of the browser? The principle of absolute positioning movement: the absolutely positioned element will look for the parent element to see if it has a positioning. If it has a positioning, it will position it according to the parent element. If the parent element has no positioning, it will look for the parent element of the parent element to see if it has a positioning, and so on until body element stops, because body element is the position of the browser. Having said so much, the author gives new learners an intuitive impression, so let's put it into practice and see the real trick.
Code Blocks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid darkorange;
margin: 0px auto;
position: relative;
}
.box div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: slateblue;
position:absolute;
right:0px ;
}
.div3{
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>Result Plot
Note: Now the author has changed the absolute positioning coordinates to right positioning, and the parent element has set a relative positioning. I will not practice it here. If the parent element of the positioned parent element is also the grandfather element, and both the parent element and the grandfather element are positioned at the same time, the element will be positioned according to the parent element instead of the grandfather element.
The characteristics of absolute positioning are analyzed as follows:
- Absolutely positioned elements are out of the standard document flow.
- Absolutely positioned elements will override elements in the standard document flow.
- An absolutely positioned element no longer takes up any space.
- Absolutely positioned elements are positioned based on whether they are between the ancestor elements of the parent element. If so, the positioning is set based on the nearest element. If not, the positioning is based on the body element.
- The parent element of an absolutely positioned element can be positioned in any way, including absolute positioning. I recommend using relative positioning, which is usually used in conjunction with absolute positioning.
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.
<<: How to build a private Docker repository using Harbor
>>: Detailed explanation of the benefits of PNG in various network image formats
Recommend
CSS commonly used font style to set the font of a variety of changes (example detailed explanation)
CSS font properties define the font family, size,...
Detailed explanation of the Chinese garbled characters problem in MySQL database
When insert into employee values(null,'張三'...
Detailed tutorial on installing centos8 on VMware
CentOS official website address https://www.cento...
Complete steps for Nginx proxy front-end and back-end separation projects with the same domain name
The front-end and back-end projects are separated...
Using MySQL database with Python 3.4 under Windows 7
The detailed process of using MySQL database with...
Detailed explanation of CSS style sheets and format layout
Style Sheets CSS (Cascading Style Sheets) is used...
Analysis of MySQL's method of exporting to Excel
This article describes how to use MySQL to export...
VMware virtual machine installation Linux system graphic tutorial
This article shares the specific steps of VMware ...
How to install MySQL 8.0 in Docker
Environment: MacOS_Cetalina_10.15.1, Mysql8.0.18,...
Detailed explanation of Truncate usage in MYSQL
This article guide: There are two ways to delete ...
CSS3 countdown effect
Achieve results Implementation Code html <div ...
JavaScript canvas to achieve colorful clock effect
Use canvas to write a colorful clock! 1. Title (1...
javascript to switch by clicking on the picture
Clicking to switch pictures is very common in lif...
React encapsulates the global bullet box method
This article example shares the specific code of ...
Summary of common knowledge points required for MySQL
Table of contents Primary key constraint Unique p...