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

Home

Web Front-end

CSS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 23, 2024 am 10:12 AM

Absolute positioning: QuoteMove and layout elements

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>

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>

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand