CSS Position Property Finishing

The use of position in CSS layouts is extensive. In some interview topics will also be common to position problems. So in this blog to tidy up the use of position attributes, in the future in-depth study will be supplemented.

What are the properties of 1.position?

static: So the default positioning of the element is position:static, which means that the element is not positioned and the element appears in the normal flow .

relative: Generate relative positioning elements, relative to their normal position positioning , but also occupy the original position, the elements through the Top,right,left,bottom attribute is specified.

Absolute: Generates an absolutely positioned element, detached from the text stream, relative to the first position element that is not a static parent. elements are specified by the Top,right,left,bottom attribute.

fixed: Generates an absolutely positioned element, positioned relative to the browser window, out of the text stream. Elements are specified by the Top,right,left,bottom attribute. (IE6 not supported)

inherit: Specifies that the value of the position property should be inherited from the parent element.

The relationship between 2.position and containing block.

(1) containing block detailed.

Defined:

The position and size of an element ' s box (es) is sometimes calculated relative to a certain rectangle, called the contain ing block of the element.

The positioning and sizing of an element's box model is often calculated from a rectangle (box), which is called the containing block of the element (containing block).

Let's see an example.

<div class= "BG" ><table><td>hello world</td></table></div>

A DIV is a containing block of a table. Table is the containing block of TD. It's not absolute.

(2) position and containing block

I found this picture on the Internet.

• If the element's position is relative or static, its containing block is created by its nearest block level, cell (table cell), or content box of the inline block (inline-block) ancestor element. element if the ' position ' attribute is not declared, then the default value ' static ' of ' position ' is used

  <table id= "table1" >  <tr>    <td id= "TD1" >      <div id= "Div1" style= "Padding:20px;border : 1px solid red; " >        <span> <strong id= "Greed" style= "position:relative;" >greed is</strong> fsdfd</span>      </div>    </td>  </tr></table>

  The position of the strong element is relative, and its containing block is created by DIV1. The text contained in the span element can be seen in Div1 where the area of the containing block created by DIV1 is its content boundary, which is the inner boundary.

• The containing block of the Position:absolute element is created by the ancestor element whose nearest ' position ' attribute is ' absolute ', ' relative ' or ' fixed '.

  • If its ancestor element is an inline element, the containing block depends on the ' direction ' attribute of its ancestor element
  • In other cases, the area containing the block depends on the inner margin boundary of its ancestor elements.
• The containing block of the position:fixed element is the current visual window.

CSS Position Property Finishing