:before 伪元素在 CSS 中使用 position 属性的各种技巧
在本文中，我们将学习如何使用 CSS 的position 属性来操作 :before 伪元素的位置。 position: relative属性是相对于其父级的。它具有帮助定位元素坐标的 left、right、top、bottom 属性。此外，我们将知道使用 position 属性来操纵 :before 伪元素的位置。
句法：
position: static|relative|absolute|fixed|stickyposition 属性可用于指定 HTML 元素与视口边缘的距离。许多网站在导航栏之前使用背景颜色。我们可以使用 Position:relative 使用背景颜色来仅覆盖导航栏的宽度和高度。
方法：我们将在 HTML 文件中使用导航栏所需的所有列表。然后，我们将提供所需的填充、边距以使用 CSS 设计列表。使用:before选择器，我们将提供背景颜色，仅覆盖导航栏的宽度和高度。我们将在导航栏中设置position:relative来设置背景颜色。
示例 1 ：以下示例说明了上述方法的实现，该方法使用相对属性值设置背景颜色以覆盖导航栏的宽度和高度。
HTML
HTML
Tricks in CSS
HTML
Tricks in CSS
输出：
我们可以在主页或我们网站上的部分之前提供背景图片。在节内添加标题、段落或添加按钮后， position:relative 属性将背景图像定位为仅覆盖节的宽度和高度。
方法：我们将使用标题，并在使用 HTML 的标题后添加一些段落。使用flex属性，我们将在该部分中居中元素，并使用 CSS 提供更好的设计。使用:before选择器，我们将提供背景图片，仅覆盖主页的宽度和高度。我们将在首页设置 position: relative 来设置背景图片。
示例2：下面的示例说明了上述方法的实现，该方法使用相对属性值设置背景图像以覆盖主页的宽度和高度。
HTML
Tricks in CSS
输出：
我们可以向容器提供相同或多个图像。使用position: relative ，我们可以操作图像以仅设置容器的宽度和高度。
方法：我们将使用 3 个盒子，并使用 CSS 设置盒子的宽度和高度。使用:before选择器，我们将添加一些图像，并覆盖容器，我们将使用 position: relative。
示例 3：下面的示例说明了上述方法的实现，该方法使用相对位置来设置背景图像覆盖容器。
HTML
Tricks in CSS
输出：
