Home > Article > Web Front-end > In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

青灯夜游forward: 2021-09-17 11:21:332665browse

This article will analyze the absolute positioning in CSS and help you understand it thoroughly. I hope it will be helpful to everyone!

Positioning an element is not so much about locating the position of the element itself, but rather the position of the element's container. In order to be able to position itself, it must know which parent div it will be positioned relative to. [Related recommendation: "css video tutorial"]

The following code shows 4 nested divs, .box-1 to .box -3 Only use display: flex and margin: auto to achieve centering. .box-4 No margin is set and is at the default position in the document flow.

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4"></div>
      </div>
    </div>
  </div>
</body>

The position attribute is not set on all elements

body {
  display: flex;
}
.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

##.box-4 in Default Position

To position yourself, an element must know 2 things:

top, right, bottom, left Set the value

When we give

.box-4 After adding the position: absolute attribute, I found that it was separated from the normal document flow. Without setting the position property, it just stays in the default position, which is the upper left corner of the parent container.

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

##.box-4
There is no position offset during absolute positioning
By adding

top : 0

and left: 0 , the element must know which element will serve as the reference container for positioning. You can see that the element here is positioned in the upper left corner of the screen. .box-4 will first check whether its parent container has the position attribute set. At first, it found that .box-3 did not have a positioning attribute set, and then it continued to the next level .box-2 and .box-1, It was found that none of them set the available position attribute. In the end

.box-4

failed to find a parent element that could be used for positioning reference, and in the end we could only use body as the positioning reference. The element is finally positioned in the upper left corner of the screen:

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

.box-4
Absolute positioning, all parent elements are not set position Properties
When we set

position: relative

to .box-1, .box-4 found that available positioning references. And finally achieved positioning relative to .box-1:

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

.box-4
Absolute positioning,.box-1 Relative positioning, .box-2 and .box-3 remain unchanged
Absolutely positioned elements will be relative to Position itself with its nearest ancestor element.

Once an available ancestor element is found, other elements will no longer be related to it (such as box2 and box3). The picture below shows the effect of setting

position:relative

to .box-2 and .box-3 respectively:

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

##.box-4

Absolute positioning,
.box-2 and .box-3 Relative positioning
Original address: https://juejin.cn/post/7008462323316686862

Author: M Cool

For more programming-related knowledge, please visit:
Introduction to Programming

! !

The above is the detailed content of In-depth analysis of absolute positioning in CSS and a thorough understanding of it!. For more information, please follow other related articles on the PHP Chinese website!

css auto display position margin flex https

Statement：

This article is reproduced at:掘金--M酷. If there is any infringement, please contact admin@php.cn delete

Previous article：Beginner's article: How to use CSS to implement simple skeletal animation (code sharing)Next article：Beginner's article: How to use CSS to implement simple skeletal animation (code sharing)

See more

In-depth analysis of absolute positioning in CSS and a thorough understanding of it!

Once an available ancestor element is found, other elements will no longer be related to it (such as box2 and box3). The picture below shows the effect of setting

Related articles