In-depth analysis of absolute positioning in CSS and a thorough understanding of it!-CSS Tutorial-php.cn

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

青灯夜游

Release： 2021-09-27 10:20:18

forward

2688 people have browsed it

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

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

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>

Copy after login

The position attribute is not set on all elements

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

Copy after login

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!