css: position positioning attribute and summary of example applications

position positioning attribute

Position in css is a very important attribute. It includes absolute (absolute positioning), relative (relative positioning), static (static positioning, default value ), fixed (fixed positioning) four types. With the position property, we can offset an element relative to its normal position, its parent element, or the browser window. Position is also an attribute that beginners can easily get confused about. At present, almost all mainstream browsers support the position attribute. In the following article, we will talk about the position positioning attribute and its application in CSS.

You can first learn free courses related to php Chinese website

1. Study"HTML+CSS Basic Introduction Tutorial"中的CSS Basic Tutorial Positioning Chapter

2. Watch "Learn CSS Video Tutorial at Your Fingertips" 中CSS Positioning Video tutorial

##position positioning related applications

1.

In-depth understanding of the position attribute in css

Absolute positioning will be completely taken out of the document flow, before the element The space occupied has also been recycled. Absolutely positioned elements are positioned based on their positioning context.

It should be noted that: It is written here that absolute positioning can transform inline elements into block-level elements. But the certainty is that once an inline element is absolutely positioned, the position of the element is difficult to control (reason: if the element does not have inner and outer margins set, and there are no absolutely positioned elements before, after, left, and right, then the element will temporarily stay on its original position. position, but if the element has margins set, the element will temporarily stay one margin away from the original position. If there are elements with absolute positioning set on the front, back, left, and right, then the element will look for the top one that is not. Below the absolutely positioned element. ) Therefore, if you set absolute positioning, you need to position the top and left of the element immediately.

2.

The difference between relative and absolute in parsing css position

position has the following attributes: static, inherit, fixed, absolute, relative

The first three Easy to understand and distinguish:
static: It is the default state, there is no positioning, and the element appears in the normal flow (ignoring top, bottom, left, right or z-index statements).
nherit: Inherit the value of the position attribute from the parent element.
fixed: Generate absolutely positioned elements, positioned relative to the browser window. (That is, when scrolling the browser, the element is always displayed at a certain position in the visible area of ​​the window).

3.

Introduction to the use of CSS positioning

absolute and fixed

Features:

a. The width of block-level elements is When undefined, it is no longer 100%, but is automatically adjusted according to the content

b. When z-index is not defined, the absoulte element will cover other elements.

c. It will break away from the normal document flow and no longer occupy space, similar to the effect after floating.

absolute is an absolute positioning relative to the previous parent element that is not static. If the position of the parent element is not specified, absolute will be positioned absolutely relative to the entire HTML document.

4.

Instructions for positioning methods using the position attribute in CSS

A static positioned element will ignore all top, right, The values ​​declared by the bottom, left and z-index properties. In order for your element to use these five properties, you need to first apply one of these three values ​​​​to its position property: absolute, relative, fixed, position The element with the value inherit is the same as the inherited value of all other properties. , the element will inherit the position value of the parent element.

5.

Summary of the four methods of positioning in css

Departing from the standard document flow

Features: (1) If this element has no parent element, then top, left, right, and bottom will be positioned relative to the browser window in the future

(2) If the absolutely positioned element has a parent element , but the parent element is not relatively positioned, then at this time top, left, right, and bottom are still positioned relative to the browsing window

　(3) If the absolutely positioned element has a parent element, and the parent element is positioned ( Non-static), then the offset of this absolutely positioned element is based on its own parent element

　　(4) The element after absolute positioning will not occupy the position on the page

6. CSS positioning and float

a. If there is a p with a default width of 100%, once absolute positioning is added, the element will be inline-blocked immediately, and the default width will automatically Adapting to the internal width of the element will cause the width and height of the page to collapse.

b. Due to the flexibility of absolute positioning, for ordinary page layouts, sometimes it is easy to abuse absolute/relative/top/left/z-index for the sake of saving trouble, which will cause later Expansion and maintenance cause trouble

Related questions and answers

1. How to achieve similar functions without using position:absolute

2. Mobile side position:fixed; compatibility issues

3. css part position fixed web page problem Drop-down made of pure css

4. How can a div move left and right with the browser after setting the position: fixed attribute?

【Related recommendations】

1. PHP Chinese website free tutorial: 《CSS 0 Basics Introduction Tutorial》

2. PHP Chinese Free online video tutorial: "php.cn Dugu Jiujian (2) - css video tutorial"

The above is the detailed content of css: position positioning attribute and summary of example applications. For more information, please follow other related articles on the PHP Chinese website!