A comprehensive understanding of absolute positioning-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

A comprehensive understanding of absolute positioning

高洛峰

Jun 05, 2017 pm 01:12 PM

absolute positioning

The following editor will bring you a comprehensive understanding of absolute positioning. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有关绝对定位的理解</title>
</head>
<style type="text/css">

/* 1. Before the positioning is set, the big box wraps the small box, which conforms to the standard document flow, as shown in Picture 1

.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
width: 200px;
height: 200px;
background:blue;
}*/

Picture 1

A comprehensive understanding of absolute positioning

##/*2. Absolute positioning changes the position of the element It has nothing to do with the document flow and therefore takes up no space.

This is different from relative positioning, which is actually considered part of the ordinary flow positioning model,

because the position of the element is relative to its position in the ordinary flow s position. The position of an absolutely positioned element is relative to the nearest positioned ancestor element.
If the element has no positioned ancestor elements, its position is relative to the original containing block.

As shown in Figure 2

.box1{width: 500px;height: 500px;background:red;position: relative;}.box2{width: 200px;height: 200px;background:blue;position:absolute;top:150px;left:150px;
}*/

Picture 2

A comprehensive understanding of absolute positioning

## /*3. Box2 has no width and height and without setting positioning, box2 will be wrapped by box1, conforming to the standard document flow, and occupying the position of the document. The width inherits the width of the parent element, and the height is automatically supported by the content open.
Like picture 3.

.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
background:blue;
}*/

Picture 3

A comprehensive understanding of absolute positioning

##/*4. Box2 has no width and height. When positioning is set, box2 will break away from the document flow, and the position will be specified relative to the relative positioning element.
The width will be invalid, which means that the width and height will be automatically determined by the content. Spread open. As shown in picture 4. If you need width and height, you need to set it separately*/

.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
background:blue;
position:absolute;
top:150px;
left:150px;
}

Picture 4

</style>
<body>
<p class="box1">
<p class="box2">这是一个小盒子</p>
</p>
</body>
</html>

The above comprehensive understanding of absolute positioning is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website. A comprehensive understanding of absolute positioning

For more articles related to the comprehensive understanding and analysis of absolute positioning, please pay attention to the PHP Chinese website!

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

What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

In how many ways can we add CSS to our HTML file?Apr 28, 2025 pm 05:24 PM

Article discusses three methods to add CSS to HTML: inline, internal, and external. Each method's impact on website performance and suitability for beginners is analyzed.(159 characters)

See all articles