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
js to realize the mouse following game
This article shares the specific code of js to im...
How to change the color of the entire row (tr) when the mouse stops in HTML
Use pure CSS to change the background color of a ...
Detailed explanation of the simple use of MySQL query cache
Table of contents 1. Implementation process of qu...
CSS achieves colorful and smart shadow effects
background Ever wondered how to create a shadow e...
HTML end tag issue and w3c standard
According to the principles of W3C, each start tag...
Linux installation steps for Jenkins and various problem solving (page access initialization password)
1. Prepare the Java environment, jdk1.8 Check whe...
MySQL Server IO 100% Analysis and Optimization Solution
Preface During the stress test, if the most direc...
Detailed process of zabbix monitoring process and port through agent
Environment Introduction Operating system: centos...
Implementation of master-slave replication in docker compose deployment
Table of contents Configuration parsing Service C...
js implementation of verification code case
This article example shares the specific code of ...
MySQL 5.7.18 Archive compressed version installation tutorial
This article shares the specific method of instal...
Examples of vertical grid and progressive line spacing
New Questions Come and go in a hurry. It has been...
Vue implements internationalization of web page language switching
1. Basic steps 1: Install yarn add vue-i18n Creat...
Ubuntu 18.04 does not prompt for password when installing MySQL and how to solve it
The installation of MySQL 5.7 on Ubuntu 1804 is i...
About Vue's 4 auxiliary functions of Vuex
Table of contents 1. Auxiliary functions 2. Examp...