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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.