Home>Article>Web Front-end> What are css positioning

What are css positioning

藏色散人
藏色散人 Original
2021-04-13 09:08:26 3199browse

CSS positioning includes: 1. static, which means static positioning; 2. relative, which means relative positioning; 3. absolute, which means absolute positioning; 4. fixed, which means fixed positioning.

What are css positioning

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS Positioning property allows you to position elements. CSS provides properties for positioning that allow you to create columnar layouts, overlap one part of a layout with another, and accomplish tasks that for years often required the use of multiple tables.

Several ways of css positioning:

1. static (static positioning):

Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations). Refer to the previous essay.

2. Relative (relative positioning):

The element positioned as relative is separated from the normal document flow, but its position in the document flow still exists, but it is visually different from the original position. move.

Position relative to its normal (original) position through the settings of top, bottom, left, and right. Hierarchical grading can be done through z-index.

.static1{ height:80px; background-color: red; } .relative{ height:80px; position:relative; top:40px; left:40px; background-color: black; } .static2{ height:80px; background-color: blue; }  

3. Absolute (absolute positioning): Generate absolutely positioned elements and position them relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

The layer positioned as absolute is separated from the normal document flow, but the difference from relative is that its position in the normal flow no longer exists.

Some people always give misleading information about this attribute. It is said that when the position attribute is set to absolute, it is always positioned according to the browser window. This is actually wrong. In fact, this is a characteristic of fixed properties.

 

4. Fixed (fixed positioning): Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

 

【Recommended learning:css video tutorial

The above is the detailed content of What are css positioning. For more information, please follow other related articles on 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