Explain the different CSS positioning schemes: static, relative, absolute, fixed, sticky

There are five types of CSS positioning methods: static, relative, absolute, fixed and sticky. static is the default positioning, following the document flow and does not support offset; relative moves relative to its original position and is still in the document flow; absolute is separated from the document flow, and is positioned relative to the nearest non-static positioning ancestor positioning; fixed relative to the browser window, and is often used to fix the navigation bar; sticky is between relative and fixed, scrolling to a specific position and fixed, suitable for sticky heads. Mastering their behavioral differences is key to layout.

The positioning of CSS is actually not that difficult, but many people are prone to confusion at the beginning. Simply put, positioning is to control where the element "stays" on the page. There are five commonly used positioning methods: static , relative , absolute , fixed and sticky . Their behaviors vary greatly. If you use the wrong one, the layout may be messy.

Below, I will talk about their differences and how to use them from the perspectives of use scenarios and behavioral characteristics.

static positioning: the default positioning method

When you don't write the position attribute, the element is static positioning. It is to be honestly arranged according to the document flow, from top to bottom and from left to right, and will not be affected by attributes such as top , bottom , left , and right .

• Suitable for most elements that do not require special control
• Not out of document flow
• Offset settings are not supported (it is useless if you write top: 20px )

So, unless you particularly want to change the layout behavior, you generally don't need to move it.

relative positioning: move relative to your original position

This positioning method is very common, especially when you want to fine-tune the position of an element. It is still in the document stream, but you can use top , bottom , left , and right to "shift it" slightly, and the direction of the shift is relative to its original position.

For example:

 .box {
  position: relative;
  top: 10px;
  left: 20px;
}

In this way, .box will move downward by 10px from its original position and 20px to its right, but its original position is still empty and will not affect the layout of other elements.

Common uses:

• Make small adjustments
• Use with absolute child elements (I'll talk about it later)

absolute positioning: detached from the document flow, relative to the nearest positioning ancestor positioning

absolute is a "liberal" that is completely out of the document stream, and its location is determined by the most recent ancestor elements that have set non- static positioning. If not, keep searching up until the viewport (browser window) is found.

For example:

 .parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

This way, .child will be positioned in the upper left corner of .parent , not the upper left corner of the entire page.

Key points:

• It will be separated from the document stream, and other elements will be like it does not exist
• Rely on the nearest positioning ancestor (non- static )
• Commonly used for pop-up windows, drop-down menus, icon overlays, etc.

fixed positioning: fixed relative to the browser window

fixed positioning is very similar to absolute , but it does not rely on any ancestor elements, but is directly positioned relative to the browser window. Even if the page scrolls, it always "sticks" in that position.

For example, if the navigation bar is fixed on the top or the floating button in the lower right corner, it is often used.

 .navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Notice:

• Leave the document flow
• Don't move with the page scrolling
• UI elements suitable for fixed positions

sticky positioning: between relative and fixed

This is a relatively new positioning method, but it is easy to use. It's like a combination of the two: it acts like relative in a certain range, and once it goes beyond that range, it becomes fixed .

The most common one is to make "sticky" navigation bar or fixed column headers of tables.

 .header {
  position: sticky;
  top: 0;
}

This way, when the page scrolls to the position of .header , it will "stick" to the top without moving.

Note:

• Must be used with top , bottom , left or right , otherwise it will have no effect
• Not out of document flow
• The parent container cannot have overflow: hidden or transform , otherwise it will fail

Basically that's it. Although there are not many positioning methods, they can make various complex layouts when combined. The key is to understand the behavioral characteristics of each method and the differences between them. For example, when to get out of the document stream and when to rely on the parent element, these details will be clear and you will not make any mistakes when using them.

The above is the detailed content of Explain the different CSS positioning schemes: static, relative, absolute, fixed, sticky. For more information, please follow other related articles on the PHP Chinese website!