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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
How to select a child element with the first class name item through CSS?
Apr 05, 2025 pm 11:24 PM
When the number of elements is not fixed, how to select the first child element of the specified class name through CSS. When processing HTML structure, you often encounter different elements...
