Home Web Front-end HTML Tutorial CSS DIV positioning analysis (relative, absolute, static, fixed)_html/css_WEB-ITnose

CSS DIV positioning analysis (relative, absolute, static, fixed)_html/css_WEB-ITnose

Jun 24, 2016 pm 12:32 PM
static

CSS DIV positioning analysis (relative, absolute, static, fixed)

When using CSS DIV for layout, the four attribute values ​​​​of position: relative, absolute, static, fixed are not very divided. Clearly, it often leads to very depressing results. I did some research today and finally understood something. To summarize here:

Let’s first look at the definition of each attribute value:

1. static: default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

2. Relative: Generate a relatively positioned element and position it relative to its normal position through the settings of top, bottom, left, and right. Hierarchical classification can be done through z-index.

3. Absolute: Generate an absolutely positioned element and position it relative to the first parent element other than static positioning. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

4. fixed: Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

The positioning methods of static and fixed are easy to understand and will not be analyzed here. The following is an analysis of the commonly used relative and absolute:

1. relative. An element positioned relative is removed from the normal text flow, but its position in the text flow still exists. As shown in Figure 1:

Figure 1

The layer with the yellow background is positioned relative, and the red border area is its position in the normal flow. After positioning it through top and left, you can see from the position of the gray background layer that its normal position still exists.

2. Absolute. A layer positioned as absolute is separated from the normal text flow, but the difference from relative is that its position in the normal flow no longer exists. As shown in Figure 2:

Figure 2

As you can see, after positioning the yellow background layer as absolute, the gray background layer is automatically filled in.

3. The main difference between relative and absolute:

First of all, it is whether the position in the normal flow exists or not as mentioned above.

Secondly, the relative positioned layer is always relative to its nearest parent element, no matter how its parent element is positioned. As shown in Figure 3:

Figure 3

In the figure, the red background layer is relative positioned, and the green background layer of its direct parent element is static positioned by default. The position of the red background layer is the top and left 20 elements relative to the green background layer. And if the red background layer is positioned as absolute, the situation is as shown in Figure 4:

Figure 4

As you can see, the red background layer still defines top:20px; left: 20px; but its relative element becomes a yellow background layer with absolute or relative positioning mode. Therefore, a layer positioned for absolute is always relative to its nearest parent layer defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in its parent layer, it will be positioned relative to the body, as shown in Figure 5:

Figure 5

Except top, left, and right , bottom positioning, the definition of margin attribute value also conforms to the above rules.

This article is reproduced from:

http://www.pqshow.com/design/htmlcss/12653.html

Statement of this Website
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

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)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the function and usage of static in C language What is the function and usage of static in C language Jan 31, 2024 pm 01:59 PM

The role and usage of static in C language: 1. Variable scope; 2. Life cycle; 3. Internal function; 4. Modify global variables; 5. Modify function; 6. Other uses; Detailed introduction: 1. Variable scope, when If there is the static keyword before a variable, then the scope of the variable is limited to the file in which it is declared. In other words, the variable is a "file-level scope", which is very useful for preventing the "duplicate definition" problem of variables; 2. Life cycle, static variables are initialized once when the program starts executing, and destroyed when the program ends, etc.

How to use static, this, super, and final in Java How to use static, this, super, and final in Java Apr 18, 2023 pm 03:40 PM

1. static Please look at the following program first: publicclassHello{publicstaticvoidmain(String[]args){//(1)System.out.println("Hello, world!");//(2)}} Have seen this Segment programs are familiar to most people who have studied Java. Even if you have not learned Java but have learned other high-level languages, such as C, you should be able to understand the meaning of this code. It simply outputs "Hello, world" and has no other use. However, it shows the main purpose of the static keyword.

Practical application scenarios and usage skills of the static keyword in C language Practical application scenarios and usage skills of the static keyword in C language Feb 21, 2024 pm 07:21 PM

Practical application scenarios and usage skills of the static keyword in C language 1. Overview static is a keyword in C language, used to modify variables and functions. Its function is to change its life cycle and visibility during program running, making variables and functions static. This article will introduce the actual application scenarios and usage techniques of the static keyword, and illustrate it through specific code examples. 2. Static variables extend the life cycle of variables. Using the static keyword to modify local variables can extend their life cycle.

How to use Java modifiers abstract, static and final How to use Java modifiers abstract, static and final Apr 26, 2023 am 09:46 AM

Modifier abstract (abstract) 1. Abstract can modify a class (1) The class modified by abstract is called an abstract class (2) Syntax: abstractclass class name {} (3) Features: Abstract classes cannot create objects separately, but they can be declared Reference the abstract class name reference name; (4) Abstract classes can define member variables and member methods (5) Abstract classes have constructors. When used to create subclass objects, jvm creates a parent class object by default; abstract constructor methods apply Applied when jvm creates parent class object. 2. Abstract can modify methods (1) The method modified by asbtract is called an abstract method (2) Syntax: access modifier abstract return value

The role of static The role of static Jan 24, 2024 pm 04:08 PM

The functions of static: 1. Variables; 2. Methods; 3. Classes; 4. Other uses; 5. Multi-threaded environment; 6. Performance optimization; 7. Singleton mode; 8. Constants; 9. Local variables; 10. Memory Layout optimization; 11. Avoid repeated initialization; 12. Use in functions. Detailed introduction: 1. Variables, static variables. When a variable is declared as static, it belongs to the class level, not the instance level, which means that no matter how many objects are created, only one static variable exists, and all objects share this Static variables and so on.

How Springboot reads custom pro files and injects static variables How Springboot reads custom pro files and injects static variables May 30, 2023 am 09:07 AM

Springboot reads the pro file and injects static static variables mailConfig.properties#Server mail.host=smtp.qq.com#Port number mail.port=587#Email account mail.userName=hzy_daybreak_lc@foxmail.com#Email authorization code mail.passWord =vxbkycyjkceocbdc#Time delay mail.timeout=25000#Sender mail.emailForm=hzy_daybreak_lc@foxmail.com#Sender mai

What is the static method of php What is the static method of php Oct 31, 2022 am 09:40 AM

The "static" in php static static methods means that these properties and methods can be called directly without instantiating the class; static is a keyword used to modify the properties and methods of the class, and its usage syntax is such as "class Foo {public static $my_static = 'hello';}".

Special syntax in PHP: Static, Final, Abstract and other keywords Special syntax in PHP: Static, Final, Abstract and other keywords May 11, 2023 pm 04:00 PM

PHP is a popular open source server-side scripting language widely used in web development. The PHP language is not only easy to learn and use, but also supports a variety of programming paradigms, object-oriented programming, functional programming, etc. In PHP, there are some special syntax keywords, such as Static, Final, Abstract, etc. These keywords have special functions in object-oriented programming. This article will introduce these keywords in detail. Static keyword In PHP, the Static keyword has two uses

See all articles