CSS定位HTML元素的方法分析

本文为大家介绍的是关于CSS定位HTML元素的方法分析，感兴趣的小伙伴一起来看看吧。

在页面上定位内容时，可以使用一些属性来帮助您操纵元素的位置。本文将向您展示一些使用 CSSposition 属性包含不同定位元素类型的示例。要在元素上使用定位，您必须首先声明它的 position property，它指定用于元素的定位方法的类型。使用 position 属性值，使用 top、bottom、left 和 right 属性定位元素。它们的工作方式也不同，具体取决于它们的位置值。

定位值有五种类型：

• 静止的
• 相对的
• 固定的
• 绝对
• 黏

静止的

HTML元素默认是静态定位的，元素按照文档的正常流程定位；静态定位元素不受 top、bottom、left 和 right 属性的影响。具有位置的元素：静态；没有以任何特殊方式定位

用于将位置设置为静态的 CSS 是：

css;">position: static; 

接下来是使用静态位置值的示例：

  
SQUARE 1
  
SQUARE 2
  
SQUARE 3
  
SQUARE 4

相对的

元素根据文档的正常流程定位，相对于其正常位置进行定位，然后 根据顶部、右侧、底部和左侧的值相 对于自身进行偏移。偏移量不影响任何其他元素的位置；因此，页面布局中为元素指定的空间与位置是静态的相同。设置相对定位元素的 top、right、bottom 和 left 属性将导致它被调整远离其正常位置。其他内容不会被调整以适应元素留下的任何间隙。

用于将位置设置为相对的 CSS 是：

position: relative; 

下面的示例使用相对位置值：

  
SQUARE 1
  
SQUARE 2
  
SQUARE 3
  
SQUARE 4

绝对

该元素将从正常的文档流中移除，并且在页面布局中，不会为该元素创建空间。元素相对于最近的定位祖先（如果有的话）定位；否则，它相对于初始包含块放置，其最终位置由顶部、右侧、底部和左侧的值确定。

用于将位置设置为绝对的 CSS 是：

position: absolute; 

一个元素position: absolute; 相对于最近定位的祖先进行定位。如果绝对定位元素没有定位的祖先，它使用文档正文，并与页面滚动一起移动。“定位”元素的位置不是static.

下一个例子强调元素的绝对位置：

  
SQUARE 1
  
SQUARE 2
  
SQUARE 3
  
SQUARE 4

固定的

从正常文档流中删除的元素，并且在页面布局中，没有为元素创建空间。元素相对于由视口建立的初始包含块定位，其最终位置由值 top、right、bottom 和 left 确定。此值始终创建一个新的堆叠上下文。

用于将位置设置为固定的 CSS 如下所示：

position: fixed; 

元素position: fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

黏

元素按照文档的正常流程定位，然后根据top、right、bottom和left的值，相对于其最接近的升序块级进行偏移，包括与表格相关的元素。偏移量不会影响任何其他元素的位置。

此值始终创建一个新的堆叠上下文。请注意，粘性元素“粘”到其最近的具有“滚动机制”的祖先，即使该祖先不是最近的实际滚动祖先。

用于将位置设置为粘性的 CSS 是：

position: sticky;

元素position: sticky; 的定位基于用户的滚动位置，relative 并fixed 根据滚动位置在位置之间切换。

重叠元素

网页上的重叠元素对于突出、宣传和关注我们网页上的重要内容非常有用。使元素覆盖在您的网站上是非常有用且非常有价值的功能设计实践。当元素被定位时，它们可以与其他元素重叠，所以要指定顺序（什么元素应该放在其他元素的前面或后面），我们应该使用 z-index 属性。具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。请注意，z-index 属性仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

下一个示例显示 z-index 属性如何在不同的正方形上工作：

  
SQUARE 1
  
SQUARE 2
  
SQUARE 3

在图像上定位文本

下面的示例使用上述 CSS 定位值在图像上覆盖一些文本：

  
Wild nature

结论

在本文中，我们描述并给出了 CSS 定位类型的示例，并描述了如何重叠元素并在图像上添加一些文本。

以上就是关于CSS定位HTML元素的方法分析的全部内容了，感兴趣的小伙伴记得点击关注哦。