用实际例子理解 CSS 位置属性

您想提高您的设计技能并增强您网站上的用户体验吗?充分理解定位元素的不同 CSS 方法会更容易。您可以通过对网页设计的基本了解来构建令人惊叹的网页。但是当您的 Web 项目更加注重细节时,主要问题就出现了,尤其是当它需要复杂的页面元素对齐时。

幸运的是,您可以使用正确的 CSS 定位来改进站点的功能并加快工作流程。让我们探索不同的 CSS 定位属性,并回顾可用于创建现代网页的不同布局。

什么是 CSS 位置属性?

CSS position属性定义了元素的位置。您可以使用leftrighttopbottomz-index属性来操作元素的位置。虽然您可以使用CSS FlexboxCSS Grid来制作对称网站,但位置属性通过将每个元素与其他元素分离来帮助您构建非对称网站。

换句话说,CSS position 属性允许元素在文档中自由移动。

CSS 位置属性的语法是:

 position: value;

以下是 position 属性可以采用的五个值:

  1. 静止的
  2. 相对的
  3. 绝对
  4. 固定的

注意:您可以使用左侧、右侧、顶部和底部属性来定位元素。但是这些属性的行为有所不同,具体取决于位置的值。

CSS 静态定位

静态是 HTML 元素的默认位置。让我们看一些示例 HTML 来理解它:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent_container utility-flex">
<div class="child_1 utility-flex">Child 01</div>
<div class="child_2 utility-flex">Child 02</div>
<div class="child_3 utility-flex">Child 03</div>
</div>
</body>
</html>

我们在父容器中放置了三个孩子。我们将使用这个例子来处理不同的位置属性。这是我们的每个示例将使用的基本 CSS:

 .utility-flex {
display: flex;
justify-content: center;
align-items: center;
}

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
}

.child_1,
.child_2,
.child_3 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
background: #e961ee;
border: 5px solid rgb(255, 255, 255);
width: 300px;
height: 100px;
color: rgb(238, 238, 238);
border-radius: 5px;
margin: 5px;
}

现在,让我们将 position: static 添加到具有底部和右侧属性的第二个孩子。

 .child_2 {
position: static;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

结果如下:

如您所见,边框属性适用,但第二个孩子的定位没有区别。如果您不应用 CSS 位置属性,它将采用静态作为默认值。这根据标准页面流定位元素。任何具有静态位置的元素都将忽略左、右、上、下和 z-index 属性。

CSS 相对定位

当您应用相对定位时,元素最初的行为与静态定位相同。但是现在,left、right、top、bottom 和 z-index 属性将通过沿指定方向从其原始位置轻推所选元素来工作。

让我们使用与之前相同的顶部和底部属性将第二个孩子的位置值从静态更改为相对。

 .child_2 {
position: relative;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

结果如下:

如您所见,第二个孩子从底部(向顶部)移动 40 像素,从右侧(向左)移动 50 像素。

CSS绝对定位

任何具有绝对定位的元素都会从文档的正常流中移除。其他元素的行为就好像该元素在文档中不存在一样。元素的最终位置由顶部、底部、左侧和右侧属性决定。

请注意,具有绝对定位的元素相对于其最近的定位(非静态)祖先定位。如果没有定位祖先,则它相对于初始包含块定位

让我们通过两个例子来理解这一点。首先,一个没有定位祖先的绝对定位子节点:

 .parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
}

.child_2 {
position: absolute;
bottom: 190px;
right: 500px;
border: 8px solid purple;
}

结果如下:

在第二个示例中,父容器具有非静态位置:

 .parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
position: relative;
}

.child_2 {
position: absolute;
bottom: 20px;
right: 150px;
border: 8px solid purple;
}

孩子现在相对于它的容器定位:

CSS 固定定位

具有固定位置的元素也会从文档的正常流中移除。在整个页面布局中没有为该元素创建空间。它相对于视口设置的初始包含块定位(除非它的任何祖先将过滤器、变换或透视属性设置为除无以外的任何其他值)。 top、left、right 和 bottom 属性将决定元素的最终位置。

让我们通过添加更多子项来调整我们现有的示例。以前,我们固定了父容器的高度。让我们删除它并设置 flex-direction: 列,以便我们的 flex 容器足够大,可以向下滚动并可视化结果。现在,将固定位置属性添加到第二个孩子,如下所示:

 .utility-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
/* height: 400px; */
margin: auto;
/* position: relative; */
}

.child_2 {
position: fixed;
bottom: 300px;
right: 100px;
border: 8px solid purple;
}

结果如下:

所以滚动根本不会影响第二个孩子的位置。它的位置相对于视口设置的初始包含块是固定的。有时,滚动元素会导致性能和可访问性问题。您可以 使用语义 HTML 和 CSS 创建一个可访问的网站

CSS 粘性定位

具有粘性定位的元素具有相对定位和固定定位的混合属性。粘性定位元素将遵循相对定位属性,直到它超过指定的阈值。之后,它将表现得好像它是固定的,直到它到达其父级的边界。

您可以使用左侧、右侧、顶部和底部属性指定阈值。如果没有阈值,元素的行为就好像它具有相对定位。

让我们将第二个子位置设置为具有最高阈值的粘性:

 .child_2 {
position: sticky;
top: 0px;
border: 8px solid purple;
}

结果如下:

如您所见,第二个孩子在滚动时的行为与其他孩子一样。但是当它达到阈值(顶部:0px)时,它的行为就好像它被固定并离开了正常的文档流。您可以使用粘性定位使导航栏粘在标题上。

结论

CSS 位置属性是一项高级网页设计技能。这需要一些学习,但您需要做的就是尝试不同的价值观、结果和例外。请记住,在创建出色的网页设计方面,没有什么比练习更胜一筹了。所以继续练习,你会变得更好。快乐编码!