Make a note of frequently used position-related properties, as well as some potholes encountered in use

  • Fixed: Fixed position relative to the browser window
position:fixed;
Copy the code

The position of the element is fixed relative to the browser window, and it does not move even if the window is scrolling. Fixed positioning makes the position of the element independent of the document flow and therefore does not take up space. Fixed positioned elements overlap with other elements.

  • 1. To move relative to his original position
position:relative;
top:10px;
left: 20%;
Copy the code

If an element is positioned relative to it, it will appear at its location. The element can then be moved “relative” to its starting point by setting its vertical or horizontal position. When relative positioning is used, the element still occupies the original space, whether or not it is moved. Therefore, moving an element causes it to overwrite other boxes. Use the top,left,right,bottom attributes to change the position of an element

  • Absolute: Moves relative to its parent element
position:absolute;
Copy the code
  • Sticky positioning: it moves relative to its original position, and then, when it exceeds the target area, it is fixed in the target position, that is, it is positioned according to relative and then fix positioning.
position:sticky;
Copy the code

The element is positioned according to the normal document flow and then relative to the element’s flow root (BFC) and containing block (the nearest block-level ancestor element) in the flow. Element positioning is then expressed as relative positioning before crossing a specific threshold, followed by fixed positioning.

  • Default position Static:
position:Static;
Copy the code

The default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right, or Z-index declarations).

  • inherit:
position:inherit;
Copy the code

Specifies that the value of the position attribute should be inherited from the parent element.

Position: Relative absolute fixed position and layout

About Absolute positioning: When a child element is positioned with absolute, it looks up layer by layer to see if there is a parent element with position:relative. If the parent element is found, all offsets such as top:10px are set relative to the position of the parent element. If no parent element is set to position:relative, absolute is offset from the root element (body)

<html>
	<head>
		<style>
			.grandFather
			{
				width:700px;
				height:500px;
				background-color:blue;
				margin:200px auto;
			}
			.father
			{
				width:200px;
				height:100px;
				background-color:red;
			}
			.son
			{
				width:50px;
				height:50px;
				background-color:green;
			}
		</style>
	</head>
	
	<body>
		<div class="grandFather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>
Copy the code

As shown in the figure, we declared three nested divs, named grandpa, Dad and son in the order of parent element to child element, and the sizes were 700×500,200×100 and 50×50 respectively. After setting three colors, we used the margin attribute to move the position of the div to the center of the browser for the experimental effect. The effect is as follows:

top:30px;
Copy the code

.father
{
	width:200px;
	height:100px;
	background-color:red;
	position:relative;
}
Copy the code

.grandFather
{
	width:700px;
	height:500px;
	background-color:blue;
	margin:200px auto;
	position:relative;
}
Copy the code

We’ll find that the Position property often changes the layout of a web page and cannot adapt to changes in browser size, so the next article will cover the Flex property for streaming layout and how to implement a basic adaptive layout.