search
HomeWeb Front-endCSS TutorialA new beginning for div+css web layout design (9)

The introduction to floating is almost finished, here are some screenshots for reference

A new beginning for div+css web layout design (9)

A new beginning for div+css web layout design (9)


A new beginning for div+css web layout design (9)

##One more thing, if the inline element is also set to float, it will automatically be equal to a block element, which is equivalent to setting the display at the same time.


The following will introduce absolute positioning
Set to absolute positioning The element box is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. The element generates a block-level box after positioning, regardless of what type of box it originally generated in the normal flow.

Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element's position is relative to its position in the normal flow.

Let’s put aside the concept. Simply put
Absolute positioning means that margin and float are no longer needed for positioning, but positioning based on coordinates
Where is the starting point of the coordinates, it is the browser The point in the upper left corner

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
} #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } </style> 
<head>
<body>
<div id="a">
<div id="b"></div> </div>
</body>
</html>

A new beginning for div+css web layout design (9)

can be seen that the green is not positioned according to its parent div, but the position of the upper left corner of the browser box

But what happens if the parent div also defines absolute positioning or relative positioning?

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: absolute;
} #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } </style> 
<head>
<body>
<div id="a">
<div id="b"></div> </div>
</body>
</html>

A new beginning for div+css web layout design (9)

Then he will be positioned according to the upper left corner of the parent div (the parent layer defines position: relative; is also valid)

In other words, if an absolute definition is It makes no sense for a positioned layer to be contained by a non-absolute or relatively positioned layer. It is equivalent to a completely independent div and is not constrained by non-absolute or relatively positioned layers.

In fact, absolute positioning is better than absolute positioning Margin positioning is much more fun. Margin positioning needs to use the surrounding divs as reference objects, while absolute positioning only needs to adjust the coordinates according to the upper left corner.
Absolute positioning is separated from the text flow. It can go to any area, even that area. There is already a div occupying it

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red; } </style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>

A new beginning for div+css web layout design (9)

You can see that it covers the ordinary div, ignoring the existence of the ordinary div

So will it also cover the floating div?

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:200px;
height:200px;
border:soild;
background:red;
float:left;
margin:10px;
} 
#d{
width:100px;
height:100px;
border:soild;
background:blue; } </style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="d"></div>
<div id="b"></div> </div>
</body>
</html>

A new beginning for div+css web layout design (9)

Blue is a normal div, red is a floating div, and green is an absolutely positioned div

It can be seen that the absolutely positioned div is at the highest level and can cover all
That is to say, ordinary divs follow the flow pattern on the ground.
Floating divs follow the flow pattern in the air. One is an airplane on the ground and the other is an airplane in the air.
Then the absolutely positioned div is equivalent to an airship. It flies higher than an airplane and can move freely

Now let’s see what happens when two absolutely positioned divs meet together

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red;
position: absolute;
left:60px;
top: 20px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>

A new beginning for div+css web layout design (9)

You can see, Green covers red, which means that two absolute divs will not have flow mode, so using margin is invalid

They treat each other as if they do not exist, and do not care which area is occupied
Why is it green? Covering red, not red covering green?
Because here



Because the red div is in front, Green comes last, and the web page is parsed from top to bottom, left to right, so when the red div appears first, the green will cover it
In short, the farther back the absolutely positioned div is, the farther it flies. High, it can cover the previous absolutely positioned div
If you turn these two around, you will find that the red covers the green

Another way is to use the z-index attribute, The higher the z-index level, the higher it will fly. If not set, it will default to 0

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red;
position: absolute;
left:60px;
top: 20px;
z-index:1;
} 
</style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>

A new beginning for div+css web layout design (9)

This way, you can determine which of them is in which without considering the order in which the absolutely positioned divs appear. The above


The above is the content of a new beginning of div+css web layout design (9). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



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.

Create an Inline Text Editor With the contentEditable AttributeCreate an Inline Text Editor With the contentEditable AttributeMar 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

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.

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)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

File Upload With Multer in Node.js and ExpressFile Upload With Multer in Node.js and ExpressMar 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

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尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot 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.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools