Detailed explanation of the use and difference between relative and absolute of HTML

Time:2020-9-14

The difference between HTML relative and absolute: to tell you the truth, html is the simplest language in the world. Tag language is that there are more tags and more English words, but they are regular. For example, text class is centered- align:center; Bold text- weight:bold;. However, some of them are difficult to understand and master tags and attributes, such as attribute position, It 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 talk about the five common attribute values of position

–Sticky: positioning based on the user’s scrolling position. In other words, tags defined by sticky tags will move up and down the page, but their content will not exceed the screen, such as the mobile navigation bar on the side of the website.

–Static: the default value of the HTML element, that is, there is no positioning, and the element appears in the normal flow. Statically positioned elements are not affected by top, bottom, left, right. That is, it has 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 scrolling, it won’t move. It’s quite like a wallpaper label, which is embedded in the screen. You can often see it in many websites, especially in shopping websites. When you see the navigation bar lying quietly on the side of the page, it is implemented with fixed

–Relative and absolute: relative positioning element is relative to its normal position. The style setting of each tag is always for its own, but it will have a relative impact on the rest of the tags. One of the most important points of HTML is the nesting relationship, that is, there are tags in the tags. First of all, let’s see the effect at the same level. The two < div > are brothers

If the position of div1 is set to relative relative position, we can see that the small square will be followed by the large square, that is, the small square is relative to the large square, that is, relative: the positioning of relative positioning elements does not allow the overlap of elements. As the saying goes, through relative, I have occupied this position, and you have to stand in my next position. When we change the large square to a large square, we can see that the small square will follow the large square Absolute position


#div1{
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: blueviolet;
	margin-left: 100px;
}

The results are as follows:

The small square will jump up, that is to say, both divs can occupy this position. If the absolute positioning is not exclusive to the large block, the absolute positioning is absolute. Compared with the parent tag, the parent tag in this example is < body > and the location of absolute positioning is absolute</body>

Extension:


<div id="div1">
  <div id="div2"></div>
</div>

When the small box is nested in the large tag, the position relative of div1 is the same as the absolute effect. The previous effect is only between sibling tags

At this time, if you set the div2 style, margin left is relative to div2. For example, if you have a large box with a distance of 100px from the left, and if you have a small box style margin left: 100px, the actual situation is that the distance between the small box and the left is 200px


#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;
			}

Conclusion: relative positioning elements are often used as container blocks of absolute positioning elements. When labels are nested, the location style of child labels is relative to the parent labels. Ningwai wants to understand the quick tag, it must understand the box model of HTML

This article on the use of HTML relative and absolute and the difference between the detailed article introduced here, more related to HTML related and absolute content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!