search
HomeWeb Front-endCSS TutorialDiscuss positioning in css in detail

 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:

详谈css中的定位

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:

详谈css中的定位

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:

详谈css中的定位

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:

详谈css中的定位

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:

详谈css中的定位

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:

详谈css中的定位

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:

详谈css中的定位

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!


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 PracticesDemystifying 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 FrameworkCreate 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 ElementsAdding 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 CachingWorking 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 TransitionMaking 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.

Classy and Cool Custom CSS Scrollbars: A ShowcaseClassy 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

Show, Don't TellShow, 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

What the Heck Are npm Commands?What the Heck Are npm Commands?Mar 15, 2025 am 11:36 AM

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.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

MinGW - Minimalist GNU for Windows

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

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool