Understanding absolute and relative in CSS

Source: Internet
Author: User

Many friends have asked me how to distinguish absolute from relative and how to use it? We all know that absolute is absolute positioning, while relative is relative positioning. But what does this mean by absolute and relative positioning? What is absolute, relative to what is relative? What kind of features can they achieve? What kind of skills are there between the two? Next we will explain them one by one.

The statements in absolute and CSS are as follows: Position: absolute; top, right, bottom, and left (trbl) for locating. If trbl is not set, by default, the original vertices are marked as the original vertices Based on the parent level. If trbl is set and the position attribute is not set at the parent level, the current absolute is located at the original point in the upper left corner of the browser. The location is determined by trbl.

In general, when the webpage is centered, absolute is prone to errors, because the webpage always adapts automatically with the resolution, while absolute uses the browser's upper left corner as the original point, the location will not change due to resolution changes. Many people make mistakes in this case. The characteristics of a webpage are similar to those of relative, but there are some essential differences.

Relative: Position: Relative In css. It indicates absolute relative positioning. It refers to the original point of the parent level as the original point, and the original point of the body is the original point without a parent level, trbl is used for positioning. When the parent class has CSS attributes such as padding, the original points of the current level are located according to the original points of the parent level content area.

Sometimes we also need to rely on Z-index to set the upper and lower relations of the container. The larger the value, the higher the upper the corner. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set with Z-index. The parent-child relationship must be set at the parent level.

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.