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
JavaScript MouseEvent Case Study
MouseEvent When the mouse performs a certain oper...
Detailed explanation of mysql deadlock checking and deadlock removal examples
1. Query process show processlist 2. Query the co...
Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8
What is a descending index? You may be familiar w...
How to create components in React
Table of contents Preface Component Introduction ...
Comparison of the advantages of vue3 and vue2
Table of contents Advantage 1: Optimization of di...
Teach you to use dozens of lines of js to achieve cool canvas interactive effects
Table of contents 1. Draw a circle 2. Circle move...
In-depth analysis of Nginx virtual host
Table of contents 1. Virtual Host 1.1 Virtual Hos...
How to view and terminate running background programs in Linux
Linux task management - background running and te...
Web Design: Web Music Implementation Techniques
<br />When inserting music into a web page, ...
MySQL 5.7.21 installation and configuration method graphic tutorial (window)
Install mysql5.7.21 in the window environment. Th...
How to pull the docker image to view the version
To view the version and tag of the image, you nee...
Implementing a shopping cart with native JavaScript
This article shares the specific code of JavaScri...
js canvas realizes circular water animation
This article example shares the specific code of ...
Detailed explanation of Docker Swarm service orchestration commands
1. Introduction Docker has an orchestration tool ...
Summary of commonly used CSS encapsulation methods
1. pc-reset PC style initialization /* normalize....