Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the concept of css positioning layout". In daily operation, I believe that many people have doubts about the concept of css positioning layout. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the concept of css positioning layout?" Next, please follow the editor to study!

Positioning layout in css refers to the way in which elements can be located anywhere on the page from their original position; positioning layout can be divided into five positioning methods: static positioning (static), absolute positioning (absolute), relative positioning (relative), fixed positioning (fixed) and sticky positioning (sticky).

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

What does css location layout mean?

CSS layout location layout (Position) means that elements can be positioned anywhere on the page from their original position.

Using position, left, right, top, bottom, you can change the existing position of an element, such as jumping out of the normal layout flow and fixing it somewhere on the page.

Positioning layout in css can be divided into static (static), relative (relative), absolute (absolute), fixed (fixed), and sticky (sticky) layouts.

1. Position: static; (static layout)

The default positioning of the HTML element is static, the default positioning is in the document stream, and elements that set the position: static; style are not affected by left,right,bottom,top. It will not change its position in the normal flow because of any special positioning method.

Examples are as follows:

123div.static {position: static; border: 3px solid # 73AD21;} position: static

Elements that are positioned using position: static;, without special positioning, follow normal document flow objects:

This element uses position: static

Output result:

2. Position: relative; (relative positioning)

Relative positioning is that the element moves relative to its position in the original standard stream and is adjusted by the left,right,bottom,top attribute.

Note:

An element with relative positioning is not separated from the document stream, that is to say, it is an in-line element / block-level element / inline block element

Since he does not deviate from the document stream, we can add magin and padding to him.

Only one property can be set in the same direction, that is, left,right selects a property setting. If top is set, bottom cannot be set.

Use the scene:

Use in combination with absolute positioning

Fine-tune the element

Examples are as follows:

123 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, and 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:

3. Position: absolute; (absolute positioning)

Reference point for absolute positioning

By default, regardless of the ancestor element, body is used as the reference point.

However, when there is a location flow element in the ancestor element (absolute / relative / fixed positioning is used), then that element is the reference point

If its ancestor element contains more than one location flow element, select the nearest location flow element as the reference point

Pay attention

Absolutely positioned elements are detached from the document stream

Because he is out of the document stream, he does not distinguish between in-line elements / block-level elements / in-line block elements

An element that is absolutely positioned is a padding that ignores its ancestor element.

Examples are as follows:

123h3 {position:absolute;left:100px;top:150px;} this is an absolutely positioned title

With absolute positioning, an element can be placed anywhere on the page. Under the title, place elements 100 px from the left of the page and 150 px from the top of the page. .

Output result:

4. Position: fixed; (fixed positioning)

An element with a fixed positioning is positioned relative to the viewport, that is, it does not scroll as the scroll bar scrolls, and it is always in the position of a viewport, adjusting its position through the left,right,bottom,top property.

Pay attention

Fixed positioning elements are detached from the document stream

As with absolute positioning, non-partitioned intra-line elements / block-level elements / inline block elements

Examples are as follows:

123 p.pos_fixed {position:fixed;top:30px;right:5px;} Some more text

Note: IE7 and IE8 support only one! DOCTYPE specifies a fixed value.

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Output result:

Position: sticky; (stickiness positioning)

This positioning combines relative positioning with fixed positioning, positioning to a certain position by relative positioning, and when the viewport reaches this position, it is fixed, such as setting top:50px, so that when the sticky element reaches the position of 50px at the top of the element that is relatively positioned, it is fixed and no longer moves upward (this is equivalent to fixed positioning).

Pay attention

Sticky positioning elements are not separated from the document stream.

Set position: sticky; to one (left,right,bottom,top) at the same time

Conditions of use

Parent elements cannot have overflow:hidden or overflow:auto attributes.

One of the values of top, bottom, left and right4 must be specified, otherwise it will only be in a relative position.

The height of the parent element cannot be lower than the height of the sticky element

The sticky element takes effect only within its parent element

Examples are as follows:

123 div.sticky {position:-webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: # cae8ca; border: 2px solid # 4CAF50;}

Try scrolling the page.

Note: the sticky attribute is not supported in IE/Edge 15 and earlier IE versions.

I am sticky positioning!

Roll me

Scroll me back and forth

Roll me

Scroll me back and forth

Roll me

Scroll me back and forth

Output result:

At this point, the study of "what is the concept of css positioning layout" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.