CSS3 base -11 CSS Positioning (positioning concept, positioning method)

I. Overview of CSS positioning

Positioning concepts

-Normal flow positioning

-Block-level element boxes in the page are arranged from top to bottom one by one

-Each block-level element will appear in a new row

-Inline elements will be arranged horizontally from left to right in a row

-Floating

-Relative positioning

-Absolute positioning

-Fixed positioning

Positioning properties

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7D/DD/wKiom1bxHJjRsdKvAAGXXXzyYE0235.png "title=" Web.png "alt=" Wkiom1bxhjjrsdkvaagxxxzyye0235.png "/>

-Position Properties:

-Position:static/relative/absolute/fixed;

-Offset property: Offsets the position of the element frame

-Top/bottom/right/left:value;

-Stacking order

-Z-index:value;

First, CSS positioning method

Relative positioning

-Element throw maintains its micro-positioning before the shape

-the element originally occupied the space to throw the reservation

-The element frame offsets a distance relative to its original position

-Set the vertical or horizontal position to move the element relative to its starting point

-set element to relative positioning

-First you need to set the value of the Position property to relative

-then use the left property or the right property to set the offset of the horizontal direction

-You can also use the top property or the bottom property to set the offset in the vertical direction

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/DA/wKioL1bxHwewIbSOAAEQYhvd79I302.png "title=" Web.png "alt=" Wkiol1bxhwewibsoaaeqyhvd79i302.png "/>

Absolute positioning

-Completely remove the contents of the element from the normal stream without occupying space

-and use the Offset property to fix the position of the element

-relative to the nearest positioned ancestor element

-If the element does not have an ancestor element that has been positioned, then its position is relative to the original containing block, such as the BODY element

-set element to absolute position

-First you need to set the value of the Position property to absolute

-then use the left property or the right property to set the horizontal position of the element

-You can also use the top property or the bottom property to set the vertical position of the element

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/DD/wKiom1bxIKygKRLgAAFQgVElZB4959.png "title=" Web.png "alt=" Wkiom1bxikygkrlgaafqgvelzb4959.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/DA/wKioL1bxIezzJAedAAEG1f4FjMs950.png "title=" Web.png "alt=" Wkiol1bxiezzjaedaaeg1f4fjms950.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/DA/wKioL1bxIWfxDc8GAADRjNwya00767.png "title=" Web.png "alt=" Wkiol1bxiwfxdc8gaadrjnwya00767.png "/>

Stacking order

-Once you have modified how elements are positioned, the elements may be stacked

-You can use the Z-index property to control the overlapping order in which the element box appears

-Z-index Properties

-Value: The larger the value, the higher the stacking order, which is closer to the user

-Elements with higher stacking order are always in front of elements with lower stacking order, that is, elements are displayed close to the page surface

-Can be set to a negative value: indicates farther away from the user

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/DA/wKioL1bxIGyRbKnEAAEgdgHJbQ0594.png "title=" Web.png "alt=" Wkiol1bxigyrbkneaaegdghjbq0594.png "/>

Fixed positioning

-Pin the contents of an element to a location on the page

-the element is completely removed from the normal stream without occupying page space

-When the user scrolls down the page, the element box does not move

-Set fixed positioning

-First you need to set the value of the Position property to fixed

-Define the position of the element by left, top, right, and bottom these offset properties

Summary: This chapter mainly introduces the CSS positioning (positioning concept, positioning method).

This article from the "Technical Exchange" blog, declined reprint!

CSS3 base -11 CSS Positioning (positioning concept, positioning method)