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

In this article, the editor introduces in detail "how to express the positioning in css3". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to express the positioning in css3" can help you solve your doubts.

Css3 positioning type: 1, relative positioning, syntax for "element {position:relative;}"; 2, absolute positioning, syntax for "element {position:absolute;}"; 3, fixed positioning, syntax for "element {position:fixed;}".

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

What are the positioning in css3

Positioning:

Relative positioning

Absolute positioning

Fixed positioning

What is location?

Positioning refers to the placement of specified elements anywhere on the page. Elements can be placed arbitrarily through positioning.

Set the positioning of the element through the position attribute

Optional values:

The default value of static, the element does not enable positioning.

Relative positioning of relative-enabled elements

Absolute turns on the absolute positioning of elements

Fixed: enables the fixed positioning of elements (also a kind of absolute positioning)

Examples are as follows:

Relative positioning:

H3.pos_left {position:relative;left:-20px} h3.pos_right {position:relative;left:20px} this is the title in the normal position, the title moves to the left relative to its normal position, the title moves to the right relative to its normal position.

Relative positioning moves the element according to its original position.

The style "left:-20px" subtracts 20 pixels from the original left position of the element.

The style "left:20px" adds 20 pixels to the original left position of the element.

Output result:

Absolute positioning:

H3.pos_abs {position:absolute;left:100px;top:150px} this is a title with absolute positioning

With absolute positioning, elements can be placed anywhere on the page. The following title is from 100px on the left side of the page and 150px from the top of the page.

Output result:

Fixed positioning:

P.one {position:fixed;left:5px;top:5px;} p.two {position:fixed;top:30px;right:5px;} some text.

More text.

Output result:

After reading this, the article "how to express the position in css3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, 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.