Home > Article > Web Front-end > What does css positioning layout mean?

What does css positioning layout mean?

WBOYOriginal: 2022-04-20 10:50:422296browse

Positioning layout in css refers to the way that elements can be separated from their original positions and positioned to any position on the page; positioning layout can be divided into static positioning (static), absolute positioning (absolute), relative positioning (relative) ), fixed positioning (fixed) and sticky positioning (sticky) five positioning methods.

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

What does css positioning layout mean

Positioning layout of CSS layout Positioning layout (Position) means that the element can be separated from its original position and positioned to any position on the page.

Using position, left, right, top, and bottom, you can change the existing position of the element, such as making the element jump out of the normal layout flow and fix it at a certain position on the page.

Positioning layout in css is divided into static, relative, absolute, fixed and sticky layout

一, position: static; (static layout)

The default positioning of HTML elements is static. The default positioning is in the document flow. Elements with position: static; style will not be affected by left, right, bottom, top influence. It will not change its position in the normal flow due to any special positioning method

Example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</body>
</html>

Output result:

What does css positioning layout mean?

2. Position: relative; (relative positioning)

Relative positioning is to move the element relative to its position in the original standard flow, through left, right, bottom, Adjust the top attribute

Note:

Elements that are set to relative positioning do not break away from the document flow, which means that they distinguish between inline elements/block-level elements. /Inline block element
Because it does not break away from the document flow, then we can add magin and padding
in the same direction only Set an attribute, that is, left, right. Select an attribute setting. If top is set, bottom cannot be set.

Usage scenario:

Combined with absolute positioning Use
to fine-tune elements

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>

Output result:

What does css positioning layout mean?

##3. position: absolute;(absolute positioning)

Reference point for absolute positioning

By default, regardless of the ancestor element, the body is used as the reference point.
However, when there is a positioning flow element in the ancestor element (using absolute/relative/fixed positioning), then the element is the reference point
If its ancestor element contains multiple positioning flow elements, select the closest positioning flow element as the reference point

Notes

Absolutely The positioned element is out of the document flow
Because it is out of the document flow, it does not distinguish between inline elements/block-level elements/inline block elements
Absolutely positioned elements will ignore the padding of their ancestor elements

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>

Output result:

What does css positioning layout mean?

4. position: fixed;(fixed positioning)

The element with fixed positioning is positioned relative to the viewport, which means that it will not follow the As the scroll bar scrolls, it is always at the position of a viewport, and its position is adjusted through the left, right, bottom, and top attributes

Notes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

Output result:

What does css positioning layout mean? ##5. Position: sticky; (sticky positioning)

This positioning combines relative positioning and fixed positioning. It is positioned to a certain position through relative positioning. When the viewport reaches this position, it is fixed. For example: set top:50px, then when the sticky element reaches the relative distance The position of the top 50px of the positioned element is fixed and will no longer move upward (this is equivalent to fixed positioning).

Note

Sticky positioned elements do not break away from the document flow

Set position: sticky; and give One of (left, right, bottom, top) can
Using conditions

The parent element cannot be overflow:hidden or overflow:auto Attributes.

One of the four values of top, bottom, left, and right must be specified, otherwise it will only be in relative positioning
The height of the parent element cannot be low Based on the height of the sticky element
The sticky element only takes effect within its parent element
The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>
</body>
</html>

输出结果：

What does css positioning layout mean?

（学习视频分享：css视频教程）

The above is the detailed content of What does css positioning layout mean?. 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

Previous article：How to set i not italic in cssNext article：How to set i not italic in css

See more

What does css positioning layout mean?

What does css positioning layout mean

Related articles