What are the three main positioning methods in CSS?

CSS is one of the most commonly used style languages ​​in web design, which can control web page layout, style, etc. Positioning is a very important part of CSS because it allows us to freely control the position of elements in the web page. There are three main positioning methods in CSS, namely static positioning, relative positioning and absolute positioning. The differences between them will be introduced one by one below.

1. Static positioning

The first is the simplest static positioning. Static positioning (static) is the default positioning method. It is laid out completely according to the HTML document flow, and the elements are arranged in the order of the standard HTML document flow. We don't have to set static positioning for the element as it is the default. The following is a simple static positioning example:

<div class="box">
  <p>这是一个 div 元素。</p>
</div>

.box {
  background: #ccc;
  padding: 20px;
}

This is a typical div element, which will be statically positioned. It will be laid out according to the standard HTML document flow and occupy a certain position on the page.

2. Relative positioning

Relative positioning (relative) is positioned relative to the initial position of the element. That is, if you position an element relative to its own initial position, it will move that distance. Here is a simple example of relative positioning:

<div class="box">
  <p>这是一个 div 元素。</p>
  <p class="inner">这是一个内部元素。</p>
</div>

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: relative;
  left: 30px;
  top: 20px;
}

We use an inner element that is positioned relative to the div element. We set the relative positioning properties, left and top, so that the element moves 30px to the right and 20px down relative to the div element. So we can clearly see that relative positioning is only positioned relative to the initial position of the element, not relative to the entire page or parent element.

3. Absolute positioning

Absolute positioning (absolute) is positioned relative to the nearest positioned ancestor element (that is, the ancestor element whose position is not static). If there is no positioned ancestor element, the element will be positioned relative to the body element. Here is a simple example of absolute positioning:

<div class="container">
  <div class="box">
    <p>这是一个 div 元素。</p>
    <p class="inner">这是一个内部元素。</p>
  </div>
</div>

.container {
  position: relative;
}

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: absolute;
  right: 30px;
  bottom: 20px;
}

We use an outer container that is set to relative positioning. We set the absolute positioning properties of an inner element, right and bottom, which causes the element to move 30px to the right and 20px down relative to the div element. Notice that we set the position attribute of the outer container. This is because absolute positioning requires a reference object. If there is no parent element with a non-static value for the position attribute, the element will be positioned relative to the body element.

Summary

To sum up, there are three main positioning methods in CSS, namely static positioning, relative positioning and absolute positioning. Static positioning is the default positioning method, and elements are arranged according to standard HTML document flow. Relative positioning positions an element relative to its initial position, while absolute positioning positions it relative to the nearest positioned ancestor element. Therefore, when designing web page layout, we need to choose different positioning methods according to needs to achieve the best effect.

The above is the detailed content of What are the three main positioning methods in CSS?. For more information, please follow other related articles on the PHP Chinese website!