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.

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
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

EditPlus Chinese cracked version

EditPlus Chinese cracked version

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

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),