Web Front-end
CSS Tutorial
The difference and connection between absolutely positioned elements and relatively positioned 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Adding Box Shadows to WordPress Blocks and Elements
Mar 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.
Demystifying Screen Readers: Accessible Forms & Best Practices
Mar 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 Framework
Mar 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.
Create an Inline Text Editor With the contentEditable Attribute
Mar 02, 2025 am 09:03 AM
Building an inline text editor isn't trivial. The process starts by making the target element editable, handling potential SyntaxError exceptions along the way. Creating Your Editor To build this editor, you'll need to dynamically modify the content
Making Your First Custom Svelte Transition
Mar 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.
Working With GraphQL Caching
Mar 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
File Upload With Multer in Node.js and Express
Mar 02, 2025 am 09:15 AM
This tutorial guides you through building a file upload system using Node.js, Express, and Multer. We'll cover single and multiple file uploads, and even demonstrate storing images in a MongoDB database for later retrieval. First, set up your projec
Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)
Mar 04, 2025 am 10:22 AM
This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form
