What are the differences between relative positioning and absolute positioning?

The differences are: 1. Positioning basis, relatively positioned elements are positioned relative to their original positions, and absolutely positioned elements are positioned relative to their nearest positioned parent element; 2. Margins and padding, elements Margins and padding will affect relatively positioned elements, and element margins and padding will not affect absolutely positioned elements; 3. z index, the z index of an element will not affect relatively positioned elements, and the z index of an element will affect absolute positioning Elements.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

Relative positioning and absolute positioning are both positioning methods in CSS that allow you to move an element from its default position to a different position. However, there are some key differences between them:

Relative Positioning

* A relatively positioned element is positioned relative to its original position.

* An element's margins and padding affect relatively positioned elements.

* The z-index of an element does not affect relatively positioned elements.

Absolute positioning

* An absolutely positioned element is positioned relative to its nearest positioned parent element.

* Element margins and padding do not affect absolutely positioned elements.

* The z-index of an element affects absolutely positioned elements.

The following are the specific differences between relative positioning and absolute positioning:

## Positioning baseThe element’s original positionThe element’s closest positioned parent elementMargins and padding will affect the element’s Position will not affect the position of the element z Index will not affect the position of the element will affect the position of the element The size of the elementDoes not affect the position of the elementWill affect the position of the element The background of the elementwill not affect the position of the elementwill affect the position of the element

Attributes	Relative positioning	Absolute positioning
The shadow of the element	Does not affect the position of the element	Will affect the position of the element

Relative positioning example

<div>
  <div>
    <p>这是一个相对定位的元素。它相对于其原始位置向右移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: relative;
  left: 100px;
}

This code will create a container containing a relatively positioned element. The relatively positioned element will be moved 100 pixels to the right.

Absolute positioning example

<div>
  <div>
    <p>这是一个绝对定位的元素。它相对于其最近的定位父元素向下移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 100px;
}

This code will create a container containing an absolutely positioned element. Absolutely positioned elements will move down 100 pixels.

In actual use, you can choose relative positioning or absolute positioning according to your needs. Relative positioning is a good choice if you just need to move an element from its default position to a different location. If you need to position an element to a specific location, absolute positioning is a better option.

The above is the detailed content of What are the differences between relative positioning and absolute positioning?. For more information, please follow other related articles on the PHP Chinese website!