Learn more about the position property in css

I don’t know, programmers who watch me write front-end knowledge, do they feel the same as me? Every time I finish writing the html structure and then write the css style content, I have a certain feeling in my mind, but after implementation , ctrl+save is really different, I feel really unhappy.
For position this attribute, every time I set it, I will be more or less surprised.
I have been interviewed two or three times, but I was not asked this question, so I still felt lucky.

• #position
  This attribute has a total of four values.

• static staticPositioning
  Default layout. If it is a block-level element, it will be stacked from top to bottom on the page. If it is an inline element, it will continue from left to right in one line. If it cannot fit, it will wrap to another line. If it does, it will continue.

• relative Relative positioning
  Causes the element to be positioned relative to its original position in the document. Change its position through the four attribute values ​​​​top, left, bottom, and left.
  The above is easy to understand.
  “ It’s hard to understand here: relative positioning of an element will retain the document flow space originally occupied by the element. When relative positioning of the element, such as top: 20px; makes the element The distance is 20px from the top of the space it originally occupied, which means that the element has moved down 20px, but other than the element moving a certain distance, no other elements on the page have changed. ”

• absolute Absolute positioning
  Absolute positioning will be completely taken out of the document flow, and the space previously occupied by the element will also be recycled. Absolutely positioned elements are positioned based on their positioning context.
  It should be noted that: It is written here that absolute positioning can transform inline elements into block-level elements. But the certainty is that once the inline element is absolutely positioned, the position of the element is difficult to grasp (reason: if the element does not have inner and outer margins , and there are no absolutely positioned elements before, after, left, and right, then the element It will temporarily stay at its original position, but if the element is set with margins, then the element will temporarily stay at a distance of one margin from the original position. It will look for the top element that is not absolutely positioned. ) Therefore, if you set absolute positioning, you need to position the top and left of the element immediately.

  Understanding of positioning context:
  Move the position of the positioning element relative to another element, then "another element" is the positioning context of the element.
  Any ancestor element of an absolutely positioned element can become its positioning context. Just set the corresponding ancestor element to position:relative;.
  If none of its ancestor elements has relative positioning set, the default positioning context of the absolute element is body.

• #fixed Fixed positioning
  Absolute positioning also completely removes the document flow. But its positioning context is the viewport, which is the browser window.
  Fixed positioning is not commonly used. The most common situation is to use it to create navigation that does not move with the scrolling of the web page.

When I am doing exercises, the most accustomed thing is to relative position the parent element, and then absolute position the child elements that need to be positioned.
Although some web pages also have the absolute positioning of the parent element, and the child element is absolutely positioned relative to the parent element, I don't like writing it this way, because the position of the parent element needs to be positioned again.

【Related recommendations】

1. Free css online video tutorial

2. css online manual

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Learn more about the position property in css. For more information, please follow other related articles on the PHP Chinese website!