Learn position layout: from static to relative, absolute and fixed

Understand position layout: from static to relative, absolute and fixed, specific code examples are required

In web development, layout is a very important part. The position property of CSS controls the layout of elements. This article will introduce the four types of position layout: static, relative, absolute and fixed, and explain its usage and effects with specific code examples.

1. Static positioning (static):
   Static positioning is the default positioning method of elements. At this time, elements are arranged according to the flow of the document and will not be affected by other positioning methods. Staticly positioned elements cannot be positioned through attributes such as top, bottom, left, and right, because they will not have any impact on the element. The following is a sample code for static positioning:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

<div class="container">
  静态定位元素
</div>

2. Relative positioning (relative):
   Relative positioning is positioned relative to the original position of the element in the document flow. By setting the top, bottom, left, and right attributes, you can specify the offset of the element relative to its original position. Relative positioning does not affect other elements, so other elements will not change position due to relative positioning. The following is a sample code for relative positioning:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    相对定位元素
  </div>
</div>

3. Absolute positioning (absolute):
   Absolute positioning is relative to the nearest positioned ancestor element (the value of the position attribute is not static ) for positioning. If no positioned ancestor element exists, an absolutely positioned element is positioned relative to the entire page. By setting the top, bottom, left, and right attributes, you can specify the offset of the element relative to the reference element. Absolute positioning will affect the position of other elements, and other elements will be rearranged to adapt to the change of the positioned element. The following is a sample code for absolute positioning:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  position: relative;
}

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    绝对定位元素
  </div>
</div>

4. Fixed positioning (fixed):
   Fixed positioning is positioned relative to the browser window. By setting the top, bottom, left, and right attributes, you can specify the offset of the element relative to the browser window. Fixed positioning does not change position as the page scrolls, so it can be used to create floating elements such as navigation bars or ads. The following is a sample code for fixed positioning:

.container {
  width: 200px;
  height: 2000px;
  background-color: #f2f2f2;
}

.box {
  position: fixed;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    固定定位元素
  </div>
</div>

Through the above code examples, we can clearly understand the differences and usage of the four position layouts. Static positioning is the default, and elements are arranged according to the flow of the document. Relative positioning allows you to position relative to the original position by specifying an offset. Absolute positioning will affect the position of other elements and requires reference to positioned ancestor elements. Fixed positioning can be positioned relative to the browser window and can be used to create floating elements.

Mastering the different methods of position layout can help us better control the position and layout of elements, thereby improving the design and user experience of web pages.

The above is the detailed content of Learn position layout: from static to relative, absolute and fixed. For more information, please follow other related articles on the PHP Chinese website!