CSS 中 position: absolute 和 position: relative 的区别以及 span 标签的用法

概述

CSS 中的 position 属性用于指定元素的定位方式。它可以有以下几个值：

• static：默认值。元素遵循正常的文档流，即元素的左上角与父元素的左上角对齐，父元素中其他元素则紧挨其后。
• relative：元素相对于其正常位置进行定位。也就是说，元素将从其在文档流中的位置开始偏移，并且不会影响其他元素的位置。
• absolute：元素相对于其父元素的左上角进行定位。也就是说，元素将从其父元素的左上角开始偏移，并且不会影响其他元素的位置。
• fixed：元素相对于视口进行定位。也就是说，元素将固定在视口上的某个位置，即使滚动页面也不会移动。

position: absolute 和 position: relative 的区别

position: absolute 和 position: relative 是最常用的两种定位属性。它们的区别在于：

• position: absolute：元素相对于其父元素的左上角进行定位。也就是说，元素将从其父元素的左上角开始偏移，并且不会影响其他元素的位置。
• position: relative：元素相对于其正常位置进行定位。也就是说，元素将从其在文档流中的位置开始偏移，并且不会影响其他元素的位置。

举个例子，假设我们有一个父元素 div，里面有两个子元素 span。第一个子元素 span 的 position 属性设置为 absolute，第二个子元素 span 的 position 属性设置为 relative。当我们改变第一个子元素 span 的 left 属性时，它的位置会发生变化，而第二个子元素 span 的位置不会发生变化。

span 标签

span 标签是一个内联元素，它可以用来为文本添加样式或功能。span 标签不会创建新的行，也不会影响其他元素的位置。

举个例子，我们可以使用 span 标签来为文本添加颜色：

<p>这是一段文字。其中<span style="color: red;">红色</span>的文本是使用 span 标签添加样式的。</p>

我们也可以使用 span 标签来为文本添加链接：

<p>这是一段文字。其中<span><a href="https://www.baidu.com">百度</a></span>的文本是使用 span 标签添加链接的。</p>

结论

position 属性是一个非常有用的 CSS 属性，它可以帮助我们创建复杂的布局。absolute 和 relative 是两种最常用的定位属性，它们的区别在于 absolute 元素相对于其父元素的左上角进行定位，而 relative 元素相对于其正常位置进行定位。span 标签是一个内联元素，它可以用来为文本添加样式或功能。