The elements in CSS are arranged according to the normal flow by default. There are two situations in which the arrangement of elements can be changed. One method is floating, which has been explained in detail in the previous article. The other method is to be discussed now. The positioning attribute Position has four values, namely static, relative, absolute, and fixed. The positioning element controls the position of the positioning element through the attributes left and top, which is 0 by default. We will describe the usage and differences of the four attribute values in the following content.
1. static (static positioning)
Static is the default value of the position attribute. Indicates that there is no positioning and the element appears in the normal flow.
2. relative (relative positioning)
Generate a relatively positioned element and position it relative to its normal position.
Look at the following case:
HTML code:
<p> </p><p>son</p>
CSS code:
.father{ width: 500px; height: 500px; background: pink; margin: 0 auto; }.son{ width: 200px; height: 200px; background: lavender; margin: 0 auto; }
The effect is as follows:
Code explanation: Under normal circumstances, p with the class name son appears in the following area, try it below if Add relative positioning to the element:
CSS code:
.son{ width: 200px; height: 200px; background: lavender; margin: 0 auto; position: relative; left: 0; top: 0; }
The effect is as follows:
It can be found that the above case has not changed after adding relative positioning. The reason is that relative is positioned relative to its own position and does not break away from the document flow. In fact, if an element is set to relative positioning And after giving left:0;top:0;, it has no effect on the element. Let's continue to see what will happen if the left value and top value are not 0:
CSS code:
.son{ width: 200px; height: 200px; background: lavender; margin: 0 auto; position: relative; left: 50px; top: 20px; }
The effect is as follows:
Effect explanation:
The red line frame is the position where the element itself should exist. Because the attribute left is 50px and the attribute top is 20px, it will be relatively Offset the position where the element itself should exist (that is, the position of the red line frame) by 50px to the left and 20px upward, to the position as shown in the picture.
3. absolute (absolute positioning)
First, absolutely positioned elements will break away from the document flow. Secondly, let’s analyze how absolutely positioned elements are positioned. , the absolutely positioned element will first find its nearest positioned parent element (except static). If there is no positioned parent element, it will keep looking upwards until the root element html. That is to say, if the absolutely positioned element does not have a positioned parent Level elements will be positioned relative to html.
Let’s take a look at the following case:
HTML code:
<p> </p><p>son1</p> <p>son2</p>
CSS code:
.father{ width: 500px; height: 500px; background: pink; margin: 0 auto; } .son1{ width: 150px; height: 150px; background: lavender; margin: 0 20px; position: absolute; left: 0px; top: 0px; } .son2{ width: 150px; height: 150px; background: skyblue; margin: 0 20px; position: absolute; left: 0px; top: 0px; }
The effect is as shown in the figure:
Effect analysis:
Absolutely positioned elements will break away from the document flow and be positioned later will cover the previous positioning, so son2 covers son1. son1 and son2 do not have a positioned parent, so they are positioned relative to the root element html. What happens if there is a positioned element? Let’s look at the following code:
CSS code:
.father{ position: relative; width: 500px; height: 500px; background: pink; margin: 0 auto; }.son1{ width: 150px; height: 150px; background: lavender; margin: 0 20px; position: absolute; left: 0px; top: 0px; }.son2{ width: 150px; height: 150px; background: skyblue; margin: 0 20px; position: absolute; left: 50px; top: 50px; }
The effect is as follows:
Effect analysis:
Father is the positioning parent of son1 and son2, so son1 and son2 are positioned relative to father. Because son2 is positioned later, son2 is covered. above son1. Because of the characteristics of relative positioning, relative positioning is often used as a containing box for absolute positioning.
4. fixed (fixed positioning)
Many times fixed positioning is needed in pages, such as the back to top button in the lower right corner of the page. Fixed positioning means that the element is always fixed in this place according to the size of the browser window. Even if the page slides, its position will not be affected. Let’s look at the following case:
HTML code:
<p>top</p>
CSS code:
body{ height: 2000px; background: #C0C0C0; }.backTop{ width: 70px; height: 70px; background: pink; }
The effect of the page without positioning is as follows:
Give the button a fixed positioning, as follows:
CSS code:
.backTop{ width: 70px; height: 70px; background: pink; position: fixed; right: 30px; bottom: 30px; }
The effect is as follows:
Even as the page scrolls, the position of the button will not change. There are many advertising areas on the page. Even if the page scrolls, the position of the advertisement is always there. This is also achieved by using fixed positioning. Note that fixedly positioned elements are also outside the document flow.
5. Summary
For several situations of floating, we only need to consider it from two aspects. On the one hand, it is the question of how to position the positioning element. On the other hand, there is the issue of whether the positioning element is separated from the document flow (the issue of being separated from the document flow will not be elaborated here). As long as these two aspects are thoroughly understood, it will be easy to understand positioning. Let’s summarize several positionings:
position:static (static positioning) fixed (fixed positioning) relative (relative positioning) absolute (absolute positioning)
static: The default value of position, which is equivalent to no positioning. Does not break away from the document flow and takes up page space.
relative: The position is relative to itself. Does not break away from the document flow and takes up page space.
absolute: The position is relative to the positioned parent element. It is separated from the document flow and does not occupy page space.
fixed: The position is relative to the browser window. It is separated from the document flow and does not occupy page space.
For more details on positioning in css, please pay attention to the PHP Chinese website for related articles!

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

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.

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.

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

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

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

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

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.


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

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

Dreamweaver Mac version
Visual web development tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool