CSS Learning notes--learning to locate position attributes

One of the remaining questions before studying today: the Position property of CSS. First, the problems related to position are summed up:

1. Position as a property, what are the values of the properties?
2. What are the common attribute values for position? What are the characteristics of each?

The first question: position as a property, what are the values of the properties?

For the position attribute, he has a total of 5 values, namely

1. Static: The default value. No positioning, elements appear in the normal stream.
2. Relative: Creates a relative positioned element, positioned relative to its normal position. The normal position also refers to the position where it will appear if there is no position property.
3. Absolute: Generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. Note here that the absolute reference object is the first parent element that has a non-static position attribute, which is explained in more detail later.
4. Fixed: Generates an absolutely positioned element that is positioned relative to the browser window.
5. Specifies that the value of the position property should be inherited from the parent element.

This definition of the nature of the problem, generally on the w3cschool can find the most standard answer, the interpretation of these 5 properties is very detailed. In fact, we often use in the development of only relative, absolute, fixed these 3 properties, and when the element is added to any one of the attributes, we also need to set the element's Left/top/right/bottom and Z-index according to the circumstances, The position of the element is defined by the "left", "Top", "right" and "bottom" properties, and the display hierarchy is controlled by Z-index.

The second question: What are the common attribute values for position? What are the characteristics of each?

The above mentioned 3 attribute values we commonly use:relative, Absolute, fixed.

Relative: When the position property of an element is set to relative, the element is moved by its previous position as a reference , based on the left equivalent of the setting. Here's a chestnut ~

<! DOCTYPE html>
The effect of the code is as follows:
The second div is moved according to its previous position, and its previous position is not occupied by the following elements . The red div is obscured by the yellow div because of the z-index effect.
Absolute: For the Position property, the first parent element other than the static anchor is positioned. Here is a detailed analysis of this sentence: first we can determine that the absolute positioning Reference object is that it has a positional property of the parent element, and then, the parent element of the position property cannot be static. 
Here's a little bit more: What if the element doesn't have a parent element with the position attribute? Here, I checked the data to determine the situation. It will be positioned according to the (note Yes 
The following changes the position property of Div2 to absolute viewing effect:
This way we can find that the red Div moves before the position is occupied by the yellow, this time actually indicates that the red Div has been out of the document flow. 
Last property value: fixed. The effect is similar to absolute, which is absolute positioning, but its reference is a fixed browser window . Modify the Position property of Div2 to fixed, scrolling the mouse scroll to see the effect, using this feature we can make similar side suspension window (some of the site's side of the small ads (Dentetsu?) Dentetsu San ┻━┻) such an effect.
In fact, I feel in the process of learning position, master good elements of the reference is the key to understand the position attribute, determine the good reference, and then based on the type of attribute values to determine the state of the following elements, you can determine the position of the elements of the good ~
PS: Through these days, I ask myself to find a way to answer the learning process, really harvest a lot. In fact, the learning process is ignored in the details are many, experienced such a process of their basic knowledge and solid a lot ~ In addition I also found that the use of blog to share knowledge is a happy process, but also to improve the programming technology can improve the expression ability, at the same time may help others, so must adhere to!! (╰_╯) #
January 11, 2016
Not Kuibu, not even thousands of miles
CSS Learning notes--learning to locate position attributes