On the position positioning problem of CSS

Source: Internet
Author: User

For beginners, the position positioning problem of CSS is more common. Before I don't know postion positioning is how, typesetting has been crooked, always row bad

The positioning of CSS is generally divided into four types:

position:static;

position:relative;

Position:absolute;

position:fixed;

which

1. Static is the default property, and the system is automatically set to the static property when the Position property is not given;

2.relative is a relative property, the setting method is: position:relative; This relative property is relative to his original position, not relative to the parent element, or relative to the root element, to make it clear that the most confusing place here

3.absolute is absolute positioning, its reference is a parent element, and the position property of the parent element is non-static, and if the parent element position is static, then look up, looking for the parent parent, until the parent element position The property is non-static, and if all the parent element position property is static, its reference is the body root element

4.fixed is a fixed position, positioning is also an absolute value, but its reference is not a parent element, but a Windows window; (usually used in a fixed position of navigation, or back to the top button)

For example:

1.position:static; When not set, the position is automatically set to static;

<! DOCTYPE html>

  

2. Position:relative Setting relative properties

When you set a relative property, the space occupied by the original element does not change, and the element is offset relative to its original position, given the top, bottom, left, and right relative offsets

<! DOCTYPE html>

  

3. Position:absolute set absolute positioning, refer to the parent element for positioning

Reference root element body Absolute positioning

<! DOCTYPE html>

  

Absolute positioning with reference to parent Div.box1

<! DOCTYPE html>

4. position:fixed; Set fixed positioning;

<! DOCTYPE html>

  

The above is the personal understanding of CSS positioning, if you need to really master, but also need to practice a few more times

On the position positioning problem of CSS

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.