The difference and connection between absolutely positioned elements and relatively positioned elements-CSS Tutorial-php.cn

The difference and connection between absolutely positioned elements and relatively positioned elements

WBOY

Release： 2024-01-23 10:12:06

Original

821 people have browsed it

The difference and connection between absolutely positioned elements and relatively positioned elements

The difference and connection between absolutely positioned elements and relatively positioned elements requires specific code examples

In HTML and CSS, we often use absolute positioning and relative positioning to Control the position and layout of elements. Absolute positioning and relative positioning are two common positioning methods, and they have different characteristics and uses in practical applications. This article will introduce in detail the differences and connections between absolutely positioned elements and relatively positioned elements, and give some specific code examples to help readers better understand and apply these two positioning methods.

1. Characteristics and uses of absolutely positioned elements

Absolutely positioned elements will break away from the document flow and will not take up space: Absolutely positioned elements will not affect other elements, they will break away Normal document flow, without any impact on the position of other elements. Therefore, absolutely positioned elements can be freely positioned anywhere on the page without being restricted by other elements.
Use the top, left, right, and bottom attributes to control position: Absolutely positioned elements can determine their specific position on the page by setting the values of the top, left, right, and bottom attributes. These property values can be pixel values, percentages, or even negative values.
Position only within the scope of its nearest non-statically positioned element: the final positioning position of an absolutely positioned element is relative to its nearest non-statically positioned (non-default positioned) ancestor element. If no matching non-statically positioned element is found, the absolutely positioned element will be positioned based on the document.
Absolutely positioned elements can cover other elements: Because absolutely positioned elements will break away from the document flow, they can cover ordinary elements to achieve a covering effect.

A typical application scenario of absolutely positioned elements is to create floating menus, pop-up boxes or special decorative effects.

The following is a sample code for an absolutely positioned element:

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div><!-- 绝对定位元素 -->
    <p>这是一个普通的段落</p>
</body>
</html>

Copy after login

In the above example, box is an absolutely positioned element, which is positioned from the top of the page by setting the top and left attributes. 100px, 200px from the left side of the page.

2. Characteristics and uses of relatively positioned elements

Relatively positioned elements still occupy space: Relatively positioned elements still occupy space on the page and will not break away from the document flow. Other elements will be laid out according to the original position of the relatively positioned element. Even if the relatively positioned element moves, the layout will not be affected.
Use the top, left, right, and bottom attributes for fine-tuning: Relatively positioned elements can also be fine-tuned by setting the values of the top, left, right, and bottom attributes. These property values are calculated relative to the element's original position in the document.
Applies to itself and child elements: The relative positioning properties apply to both itself and its contained child elements. Child elements can be positioned with reference to the position of a relatively positioned element.

Relatively positioned elements are usually used to fine-tune the position of elements to achieve a more flexible layout in specific scenarios.

The following is a sample code for a relatively positioned element:

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"><!-- 相对定位元素 -->
        <p>这是一个相对定位元素内的段落</p>
    </div>
</body>
</html>

Copy after login

In the above example, box is a relatively positioned element. By setting the top and left attributes, it is positioned based on its original position. Moved 20px down and 50px to the right. Paragraph elements are also positioned relative to the box.

3. The relationship between absolute positioning elements and relative positioning elements

Relative positioning is the basis of absolute positioning: Relative positioning is a special form of absolute positioning. Before setting the absolute positioning of an element, we usually set it to relative positioning first, and then use attributes such as top and left for specific positioning.
Absolutely positioned elements and relatively positioned elements can exist at the same time: Absolutely positioned elements and relatively positioned elements can exist at the same time on the same page. The layout between them does not interfere with each other and can be positioned freely on the page.
The z-index attribute can be used to control the stacking order of elements: By setting the value of the z-index attribute, you can control the stacking order of absolutely positioned elements and relatively positioned elements, thereby achieving the occlusion effect of different elements.

The following is a sample code for an absolutely positioned element and a relatively positioned element that coexist:

<!DOCTYPE html>
<html>
<head>
    <style>
        #box1 {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        #box2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1"><!-- 相对定位元素 -->
        <div id="box2"></div><!-- 绝对定位元素 -->
    </div>
</body>
</html>

Copy after login

In the above example, box1 is a relatively positioned element, by setting top and left Properties, moved 20px down and 50px to the right. box2 is an absolutely positioned element. By setting the top and right attributes, it is positioned to the upper right corner of box1.

Through actual code examples, we can more clearly understand the differences and connections between absolutely positioned elements and relatively positioned elements. By mastering the characteristics and uses of these two positioning methods, we can more flexibly layout and design web pages to achieve better visual effects.

The above is the detailed content of The difference and connection between absolutely positioned elements and relatively positioned elements. For more information, please follow other related articles on the PHP Chinese website!