Detailed explanation of the use and difference between relative and absolute in HTML
|
The difference between relative and absolute in HTML: To be honest, HTML is the simplest language in the world. It is a tag language, with many more English words in the tags, but they are all regular, such as text-align:center; bold text-weight:bold;. However, there are still some tags and attributes that are difficult to understand, such as the attribute position, which is a way of positioning. The code is as follows:
#div1{
position: relative;
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}Let's first talk about the five common attribute values of postion: --sticky: Position based on the user's scroll position. That is, the label defined by the sticky tag will move up and down with the page, but its content will not exceed the screen, such as the mobile navigation bar on the side of the website. --static: The default value for HTML elements, that is, there is no positioning and the element appears in the normal flow. Statically positioned elements are not affected by top, bottom, left, or right. That is the same effect as not writing position. --fixed: The position of the element is fixed relative to the browser window. Even if the window is scrolled, it will not move, just like a wallpaper label, as if it is embedded in the screen. It can be seen on many websites, especially shopping websites. The navigation bar lying quietly on the side of the page is implemented with fixed. --relative and absolute: The positioning of a relatively positioned element is relative to its normal position. The style setting of each tag is always for itself, but it will have a relative impact on other tags. A very important point in HTML is the nested relationship, that is, there are tags within tags. First, let's look at the effect at the same level. The two <div> are brothers.
In the above case, div1's position is set to relative. It can be seen that the small square will be next to the big square, that is, the small square is relative to the big square, that is, relative: the positioning of relative positioning elements does not allow elements to overlap. As the saying goes, relative means that I have occupied this position and you have to stand in the next position. When we change the position of the big square to absolute,
#div1{
position: absolute;
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}The effect is as follows:
The small square will jump up, which means that both divs can occupy this position, not the large square. Absolute positioning is absolute positioning relative to the parent tag. In this case, the parent tag is <body></body> Extensions: <div id="div1"> <div id="div2"></div> </div> When the small square is nested in the big tag, the relative and absolute effects of your div1 position remain unchanged. The previous effect is only reflected between the sibling tags.
At this time, if you set the style of div2, margin-left is relative to div2. For example, when your large box is 100px away from the left, when your small box style is margin-left: 100px; the actual situation is that the small box is 200px away from the left.
#div1{
position: relative;
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}
#div2{
margin-left: 100px;
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
Summary: Relative positioning elements are often used as container blocks for absolutely positioned elements. When tags are nested, the position style settings of child tags are relative to the parent tag. If you want to understand quick tags, you must understand the HTML box model. This is the end of this article about the usage and differences of HTML relative and absolute. For more relevant HTML relative and absolute content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Map the mouse position in CSS and control the page elements by moving the mouse (example code)
>>: Introduction to possible problems after installing Tomcat
Recommend
Nginx forwarding based on URL parameters
Use scenarios: The jump path needs to be dynamica...
How to upload projects to Code Cloud in Linux system
Create a new project test1 on Code Cloud Enter th...
Native JS to implement hover drop-down menu
JS implements a hover drop-down menu. This is a s...
How to explain TypeScript generics in a simple way
Table of contents Overview What are Generics Buil...
Detailed tutorial on how to use docker to build a laravel development environment in win10 home version
operating system: Win10 Home Edition Install Dock...
Detailed tutorial on building Gitlab server on CentOS8.1
There is no need to say much about the difference...
How to display web pages properly in various resolutions and browsers
The key codes are as follows: Copy code The code i...
Detailed explanation of JavaScript timers
Table of contents Brief Introduction setInterval ...
Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts
Note: sg11 Our company only supports self-install...
Detailed example of deploying Nginx+Apache dynamic and static separation
Introduction to Nginx dynamic and static separati...
Vue state management: using Pinia instead of Vuex
Table of contents 1. What is Pinia? 2. Pinia is e...
MySQL slow log online problems and optimization solutions
MySQL slow log is a type of information that MySQ...
How to implement html input drop-down menu
Copy code The code is as follows: <html> &l...
Summary of DTD usage in HTML
DTD is a set of grammatical rules for markup. It i...
Detailed tutorial on installing and using Kong API Gateway with Docker
1 Introduction Kong is not a simple product. The ...