Web page layout: (3) position coordinate system layout

page coordinate system

Because all text content is read from left to right and top to bottom, which is consistent with writing habits and reading habits, so the upper left corner of the page is specified as the origin, which is the center of the coordinate system, but this is only according to the definition of left top.

In fact, in the html page, four coordinate systems can be made, the vertical one has top bottom, the horizontal one has left right, and then the vertical and horizontal ones can be combined to get left top, right top, left bottom and right bottom Coordinate System.

These four coordinate systems exist in the page at the same time, and they are coordinate systems with the four corners as the origin. Therefore, when we use the coordinate system for coordinate description on the page, instead of using x and y in the mathematical coordinate system, we use the coordinate system description: left, top and the like.

CSDN illiterate Lao Gu's blog , https://blog.csdn.net/superwfei
Lao Gu's personal community , https://bbs.csdn.net/forums/bfba6c5031e64c13aa7c60eebe858a5f?category=10003&typeId=3364713

position setting

By default, the default value of position is static mode, that is, static mode. We cannot modify the rendering effect of elements according to the coordinate system, but must modify the setting of position to achieve the way of using the coordinate system.

After modifying the style information through position, the element will reconstruct the coordinate system inside, and its own position will be adjusted according to the setting of position.

fixed

position:fixed position relative to the form where the page is located

Well, that is to say, no matter how much the page content is, whether there is scrolling or not, the position of the element will never change visually, you can use an example to observe, and we use four coordinate systems to do it separately Make a fixed element

  <div style="position:fixed;width:100px;height:100px;background:black;left:10px;top:10px;color:white;">left top 坐标系</div>
  <div style="position:fixed;width:100px;height:100px;background:red;right:10px;top:10px;color:white;">right top 坐标系</div>
  <div style="position:fixed;width:100px;height:100px;background:purple;left:10px;bottom:10px;color:white;">left bottom 坐标系</div>
  <div style="position:fixed;width:100px;height:100px;background:blue;right:10px;bottom:10px;color:white;">right bottom 坐标系</div>
  <div style="background:yellow;">正常的内容，忽略 fixed 元素，正常渲染。</div>

When there are conflicting coordinate systems in the style at the same time, for example, left and right are written at the same time, then the left shall prevail. If top and bottom appear at the same time, the top shall prevail. This is a point that needs attention.

Elements set with fixed do not occupy the position of page rendering order. At the same time, fixed has a higher priority than the layer depth of normal rendering. Even if the layer depth setting (z-index) is modified, it will not affect the fixed element and static element. Show priority.

relative

position:relative relative to the original position of the element for displacement

Forehead. . . . In fact, it is quite a concept. In this way, let's observe through a small example. The left side is the normal rendering, and the right side is the result of displacement after relative.

	<div style="display:inline-block;width:300px;border:1px solid #ccc;padding:10px;">左边正常渲染
		<div style="border:1px solid #ccc;">一个正常的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;">比原本位置向上移动5像素的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;">relative 设置中，right 和 bottom 是无效的</div>
		<div style="border:1px solid #ccc;margin-top:10px;">一个向右位移的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;">一个正常的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;">一个正常的div</div>
	</div>
	<div style="display:inline-block;width:300px;border:1px solid #ccc;padding:10px;margin-left:10px;">右边通过 relative 位移
		<div style="border:1px solid #ccc;">一个正常的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;position:relative;top:-5px;">比原本位置向上移动5像素的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;position:relative:bottom:-5px;right:5px;">relative 设置中，right 和 bottom 是无效的</div>
		<div style="border:1px solid #ccc;margin-top:10px;position:relative;left:10px;">一个向右位移的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;">一个正常的div</div>
		<div style="border:1px solid #ccc;margin-top:10px;">一个正常的div</div>
	</div>

It can be seen that in the relative setting, right and bottom are invalid, and only the left top coordinate system can be used. At this time, the origin position is the upper left corner of the original position of the element. If left is a positive number, it moves to the right, and left is Negative number, then move to the left, top is the same. At this time, it is the same as the use of the mathematical coordinate system, but instead of x, y, it is left and top.

At the same time, another point that needs to be noted is that it is only a displacement, but the line occupied by the rendering, or the space has no displacement, and it is still the original position. By moving the content behind the div by 5 pixels up, you can see , the positions behind are the same.

absolute

position:absolute relative to the absolute position of the parent coordinate system

Well, let’s go back to just now, as we have said, each position will reconstruct its internal coordinate system. When we use other position settings inside it, it will be realized according to its own coordinate system.

	<div style="position:absolute;left:100px;top:10px;width:100px;height:50px;border:1px solid #ccc;">相对页面的 left top 定位</div>
	<div style="position:absolute;right:100px;bottom:10px;width:100px;height:50px;border:1px solid #ccc;">相对页面的 right bottom 定位</div>
	<div style="position:relative;top:70px;padding:50px;border:1px solid #ccc;">
		这个 div 使用了 position，即重构了坐标系
		<div style="position:absolute;left:100px;top:10px;width:200px;height:50px;border:1px solid #ccc;">相对父级position的 left top 定位</div>
		<div style="position:absolute;right:100px;bottom:10px;width:200px;height:50px;border:1px solid #ccc;">相对父级position的 right bottom 定位</div>
	</div>

The problem to be noted here is the same as fixed, the absolute content does not occupy the current rendering position. At the same time, you need to pay attention to the padding and margin settings used by the parent position element. Padding does not affect the origin position, but margin will affect the origin position. At the same time, the coordinate system related to right and bottom is affected by the width and height data of the parent position element.

sticky

position: sticky sticky settings

Forehead. . . . A newest setting, Lao Gu only found out that there is still this. . . . Lao Gu used to realize this kind of content through js himself. . . .

Well, after a closer look, there are still some compatibility issues. On mobile devices, since they are relatively new browser cores, they can be used directly. However, for ie, edge and the like. . . Still don't think about it.

This effect cannot be withdrawn with static screenshots. Friends can take a look at the example of w3school: https://www.w3school.com.cn/tiy/t.asp?f=css_position_sticky

Application Scenario

There are still many position-related applications. For example, the fuzzy search results that pop up from the input box, such as the floating layer settings that pop up from the calendar control, such as information prompts, image previews, etc., all use position-related layouts in large numbers. Well, the last sticky setting is now also implemented through css. It is a very convenient usage to keep a required page header when the page is scrolling, which is very practical when the table is scrolling.