Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use css's position, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use position in css. Let's take a look at it.

Position

We all know that all elements have the css attribute position, so let's take a look at its basic definition and available values.

Define

Position determines how element positions are rendered

Available value

Static: default value, elements are rendered sequentially in the document stream

Absolute: the element's position is relative to its nearest non-static parent element

Fixed: element position relative to browser window

Relative: the position of the element is relative to the position that should have been rendered

Sticky: switch between relative and fixed based on scrolling position

Initial: set to default

Inherit: inheriting from parent element

Basic usage

This is a paragraph!

Body {

Background: beige

}

Section {

Display: block

Width: 400px

Height: 160px

Background: lightgray

}

P {

Width: 50%; / * = = 400px * .5 = 200px * /

Height: 25%; / * = = 160px * .25 = 40px * /

Margin: 5%; / * = = 400px * .05 = 20px * /

Padding: 5%; / * = = 400px * .05 = 20px * /

Background: cyan

}

Well, it's rendered as we expected. Now let's change the display property of section to inline

Section {

Display: inline

Width: 400px

Height: 160px

Background: lightgray

}

This damage is really immediate ah, why is it so? To understand the mystery, you need to understand what a content block is.

Content block

Define

Typically, the size and location of an element depends on its block of content. In general, a content block is the nearest block-level parent of the element, with some exceptions.

Why content blocks are important

The size and position of an element is referenced by its content block, which affects the width, height, padding, margin and offset-related attributes of the element.

How to find the content block corresponding to an element

When position is static or relative, its content block is the content box (content-box) of its nearest block-level parent element, such as block, inline-block, list-item, or an element specified as a format container, such as table, flex, grid.

When position is an absolute, its content block is the padding-box of the block-level parent element whose nearest position is not static.

When position is fixed, its content block is the entire view window (viewport)

When position is absolute or fixed, its content block may also be the padding-box of the nearest parent element with the following special circumstances.

Transform or perspective has been set or will not be set to none.

Filter is set or will not be set to none.

Calculate the percentage from the content block

Height, top, and bottom are calculated as percentages based on the height value of the content block. If the content block is static or relative, and the height is not set, depending on its content to determine the height, then these values will become 0.

Width, left, right, padding, margin are calculated as percentages based on the width value of the content block.

Example explanation

Now that we understand the concept of fast content, let's take a look at the example above. The nearest parent element of p is section. When it is set to inline, it is no longer a block-level element, so body becomes the nearest block-level parent element to p. At this time, the internal percentage calculation is based on the width and height of body.

Use case for absolute

Let's look at other examples.

Now let's set the position of p in the first example to absolute, and change section from inline to block

Body {

Background: beige

}

Section {

Display: block

Width: 400px

Height: 160px

Background: lightgray

}

P {

Position: absolute

Width: 50%; / * = 50% of browser width * /

Height: 25%; / * = 25% of browser height * /

Margin: 5%; / * = 5% of browser width * /

Padding: 5%; / * = 5% of browser width * /

Background: cyan

}

Since p is set to absolute, it is obvious that its size is calculated according to the browser window, and note that it also goes through the process of finding content blocks. The ancestor element of p is static, so the browser window becomes its content block.

Now we are all right, everything is under control, we try to set the transform of section to rotate (0deg), rotate 0 degrees, we can expect that there should be no visual effect, but doing so will affect the decision on the content block, resulting in a change in the size and position of p.

Section {

Transform: rotate (0deg)

Width: 400px

Height: 160px

Background: lightgray

}

P {

Position: absolute

...

}

Look! Because we set up the content block of transform,p for section is no longer a browser window, but section.

This is the end of the article on "how to use css's position". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use css's position". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.