Css absolute positioning absolute and relative positioning relative examples

For those who are not familiar with CSS, it is very difficult to grasp the absolute location of the absolute cssposition and relative location of relative, even those who have a certain css foundation may not be able to fully master the use of absolute and relative in css. This article describes how to use absolute and relative positioning methods and techniques through examples. For more information, see the examples in this article. 1. If the position attribute value of an element is absolute, there are two situations:

1. if the position attribute (static by default) is not defined in the parent (including direct and indirect parent) element, the element is located based on the page, top, left, and other properties will refer to the page.

If the width and height attributes of the element are percentages, the two attributes refer to the width and height of the page.

In the above Code, p2 is absolute positioning, and its parent-level element does not set the position attribute, so this element will be located based on the page.

You can copy the above instance code and run it here to check the effect.

From the running effect, we can see that p2 is located relative to the page, and its width and height are half of the width of the page.

2. If the parent element defines the position attribute (relative or absolute), it will refer to the parent element.

  
 p1 
p2

You can copy the above instance code and run it here to check the effect.

From the running effect, we can see that p2 is located relative to p1, and the width and height are also relative to p1.

2. If the position attribute value of an element is relative, the element is located relative to its normal position (I .e. position: static.

By default, the width of the parent container is full, and the height is determined by the content. When it is the first child element of the parent element, the position is in the upper left corner of the parent element.

You can set the position and size of the container as the reference, and the height is special. When the height is set, the status full of the parent container is used as the reference.