What are the positioning models in CSS?

Positioning model June 8, 2017 fanbright

css supports 6 positioning models

• static

• Absolutely

• Fixed

• Relative

• ##Floating

• Relative floating

---

Set position

• position:static; you can cancel the positioning setting of the element and restore it to its original position. The display mode in the regular flow.static is the default value.

• position:relative; can offset the position of the element by a certain distance relative to the regular flow.

• position:absolute;You can offset the element by a certain distance relative to the position of the regular flow or the position of the nearest positioned ancestor element.

• position:fixed;You can make the element relative Offset a certain distance from the window.

• z-index can set the stacking order of elements. The larger the value, the higher the element is.

---

Recently positioned ancestor element

• If the element that sets the position does not have a positioned ancestor element, then

  becomes Positioning ancestor elements, in other words, is the default position element.

##The most recently positioned element must be a valid ancestor element (relative|absolute|fixed ), CSS does not support positioning relative to any element in the document.
position:relative; is a very good way to create positioned ancestor elements because it does not leave the routine Flow. Using this method, you can create a layout that maintains regular flow and achieves absolute positioning.

• Atomic display

  The element whose position is set is

  Atomic display

  , which means that external elements cannot appear between its static descendant elements, inline content and background. By using relative positioning, absolute positioning and fixed positioning modes, you can Elements are set to atomic display, and block-level elements set to overflow:scroll|auto are also atomically displayed

and are static block-level elements with no position set. When overlap occurs, their inline content will not overlap, but their

borders and background

will overlap, but text will not.

z- index

applies to all elements, the default auto

z-index is not a global attribute, but relative to the set numeric value The z-index is determined by the most recently positioned ancestor element. The root element html will create a root stacking context. Each positioned element with a specified numeric value z-index will create a local local stacking context.
Static positioning elements are stacked from back to front according to the order in which the document appears.
Setting the position element ignores the order in which the document elements appear, but changes from small to large based on the z-index value. The largest order is stacked from back to front. Negative value set position elements are located under static positioning elements and non-set position floating elements

一static positioning model

---

position:static;The default is static;

The starting position of a static element is determined by the position of the previous static element. The ## of the static element #Size
• ,

  Padding,Border, and Margin determine the starting position of the next element.

  The vertical margins of adjacent elements will
merge
• together, and the final margin is the

  larger value of the margins of the two adjacent elements

  Set the left and right margins to auto to center the
static block-level
• elements with the

  set size.

Two absolute positioning models

---

position:absolute;

##Percentage

is relative to the nearest positioned ancestor The size of the element, and the size of
• non-parent element

  .Set the left, right, top, bottom of the element to

  auto
, which can restore
• its original position in the regular flow.

  Unlike floating elements, absolute elements will not be automatically arranged and will not be affected by other elements. , will not affect other elements.

• If all child elements of an element are set to absolute positioning, then its height will become

  0

  , all Its child elements have all left the regular flow.

• If there is no positioned ancestor element, it will be positioned based on

• Absolutely Positioning and centering, general elements

   div{
              position:absolute;
              width:200px;
              height:200px;
              margin:0 auto;
              border:1px solid blue;
              /*left:0;*/ 这两条没用,没有影响
              /*right:0;*/
  }

  Absolute positioning and centering, static inline elementsFor static inline elements, such as em, strong, span, etc., but does not include inline replaceable elements (input, img, textarea, etc.), when using the absolute positioning mode absolute, width and right can be used. In order to be centered, you need to add

  left:0; and right:0;

  so that margin:0 auto; can take effect normally. .

  Note that left and right

  must be 0

  .<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  #em{             position:absolute;             width:200px;             height:200px;             margin:0 auto;             border:1px solid blue;             left:0;             right:0; }</pre><div class="contentsignin">Copy after login</div></div>
  Three fixed positioning model

position:fixed;You can change any element into a fixed position element

---

Remember: the position of the fixedly positioned element is relative to the

window

, and

Not
• relative to the nearest positioned ancestor`, and the element will not scroll as the page scrolls.

• Because it is positioned relative to the page, does not require the nearest ancestor to be positioned

• It is best to use top and left when setting For offset positioning, when top, left, bottom, and right are set at the same time, the values ​​of top and left will be given priority . Only when top and left do not exist , bottom and right will be used. Only then will it take effect

---

Four relative positioning

position:relative;

• Use left and top are used to change the position of the element. The default value of left and top is auto. Auto will keep the relatively positioned element in its original position in the regular flow.

• Any element can be set to position:relative; Therefore, its absolutely positioned descendant elements can be positioned relative to it.

---

Five floating positioning and reset

Use float:left; and float:right; can make the element leave the regular flow.

• ##Use float:none; the default is none, which can override other floating rules of the element and avoid inheriting float

• Floating elements will not affect the position of the block-level box, but only affect the inline elements

##clear:left;clear:right;clear;both;
Any element can be set as a floating element, clear is applicable to tables, block-level elements and floating elements
clear is not applicable
• Inline

  ,Absolute positioning or Fixed positioning elements

##Six relative floating positioning

---

Use float to make some elements floating elements. Floating elements can be set to relative positioning through relative. Relative floating elements are still in the regular flow where the floating elements are located. You can use left and top to set its offset position in the flow. .

##Only positon:relative; and position:static; are applicable to floating elements. When set to absolute and fixed, the display result is uncertain.

• sporadic

---

In css, if the parameter value is 0, do not add units,

• Before rendering the content of an element, the browser will first render its frame, starting with the background color, then the background image, then the border, and finally, the browser will render the content of the frame on top of the frame

The above is the detailed content of What are the positioning models in CSS?. For more information, please follow other related articles on the PHP Chinese website!