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
How to implement HTML Table blank cell completion
When I first taught myself web development, there...
Use Shell scripts to batch start and stop Docker services
Table of contents Start Docker Stop Docker Python...
Installing Windows Server 2008 operating system on a virtual machine
This article introduces the installation of Windo...
Do you know the difference between empty value and null value in mysql
Preface Recently I found that my friend's met...
Solve the problem of Chinese garbled characters when inserting data into MySQL by Tomcat under Linux
1. Problem The project developed using Eclipse on...
Implementation of draggable rows and columns and selection column components based on el-table encapsulation
Effect Need environment vue elementUI Drag and dr...
In-depth study of vue2.x--Explanation of the h function
Table of contents Solution, Summarize: vue projec...
Detailed explanation of Linux less command examples
less file name View File less file name | grep -n...
Mysql query database capacity method steps
Query the total size of all databases Here’s how:...
Detailed explanation of the failure of MySQL to use UNION to connect two queries
Overview UNION The connection data set keyword ca...
Understanding what Node.js is is so easy
Table of contents Official introduction to Node.j...
MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC
This article mainly focuses on the installation a...
Summary of three ways to create new elements
First: via text/HTML var txt1="<h1>Tex...
Deep understanding of the mechanism of CSS background-blend-mode
This article is welcome to be shared and aggregat...
Some settings of Div about border and transparency
frame: Style=”border-style:solid;border-width:5px;...