• 如何使用 CSS 定位 HTML 元素

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

    定位值有五种类型：

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

    静止的

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

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

    position: static;

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

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. body {
    6.   color: WHITE;
    7.   font:  Helvetica;
    8.   width: 420px;
    9. }
    10. .square-set,
    11. .square {
    12.   border-radius: 15px;
    13. }
    14. .square-set {
    15.   background: darkgrey;
    16. }
    17. .square {
    18.   position: static;
    19.   background: Green;
    20.   height: 70px;
    21.   line-height: 40px;
    22.   text-align: center;
    23.   width: 90px;
    24. }
    25. </style>
    26. </head>
    27. <body>
    28. <div class="square-set">
    29.   <figure class="square square-1">SQUARE 1</figure>
    30.   <figure class="square square-2">SQUARE 2</figure>
    31.   <figure class="square square-3">SQUARE 3</figure>
    32.   <figure class="square square-4">SQUARE 4</figure>
    33. </div>
    34. </body>
    35. </html>

    相对的

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

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

    position: relative;

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

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. body {
    6.   color: white;
    7.   font:   Helvetica ;
    8.   width: 420px;
    9. }
    10. .square-set,
    11. .square {
    12.   border-radius: 15px;
    13. }
    14. .square-set {
    15.   background: darkgrey;
    16. }
    17. .square {
    18.   background: green;
    19.   height: 70px;
    20.   line-height: 40px;
    21.   position: relative; 
    22.   text-align: center;
    23.   width: 80px;
    24. }
    25. .square-1 {
    26.     top: 15px;
    27.   }
    28. .square-2 {
    29.   left: 50px;
    30. }
    31. .square-3 {
    32.   bottom: -23px;
    33.   right: 30px;
    34. }
    35. </style>
    36. </head>
    37. <body>
    38. <div class="square-set">
    39.   <figure class="square square-1">SQUARE 1</figure>
    40.   <figure class="square square-2">SQUARE 2</figure>
    41.   <figure class="square square-3">SQUARE 3</figure>
    42.   <figure class="square square-4">SQUARE 4</figure>
    43. </div>
    44. </body>
    45. </html>

    绝对

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

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

    position: absolute;

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

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

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. .square-set {
    6.   color: WHITE;
    7.   background: darkgrey;
    8.   height: 200px;
    9.   position: relative;
    10.   border-radius: 15px;
    11.   font:  Helvetica ;
    12.   width: 420px;
    13. }
    14. .square {
    15.   background: green;
    16.   height: 80px;
    17.   position: absolute;
    18.   width: 80px;
    19.   border-radius: 15px;
    20.   line-height: 60px;
    21. }
    22. .square-1 {
    23.   top: 10%;
    24.   left: 6%;
    25. }
    26. .square-2 {
    27.   top: 5;
    28.   right: -20px;
    29. }
    30. .square-3 {
    31.   bottom: -15px;
    32.   right: 40px;
    33. }
    34. .square-4 {
    35.   bottom: 0;
    36. }
    37. </style>
    38. </head>
    39. <body>
    40. <div class="square-set">
    41.   <figure class="square square-1">SQUARE 1</figure>
    42.   <figure class="square square-2">SQUARE 2</figure>
    43.   <figure class="square square-3">SQUARE 3</figure>
    44.   <figure class="square square-4">SQUARE 4</figure>
    45. </div>
    46. </body>
    47. </html>

    固定的

    从正常文档流中删除的元素，并且在页面布局中，没有为元素创建空间。元素相对于由视口建立的初始包含块定位，其最终位置由值 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 属性如何在不同的正方形上工作：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. .square-set {
    6.   color: white;
    7.   background: purple;
    8.   height: 170px;
    9.   position: relative;
    10.   border-radius: 15px;
    11.   font:  Helvetica;
    12.   width: 400px;
    13. }
    14. .square {
    15.   background: orange;
    16.   border: 4px solid goldenrod;
    17.   position: absolute;
    18.   border-radius: 15px;
    19.   height: 80px;
    20.   width: 80px;
    21. }
    22. .square-1 {
    23.   position: relative;
    24.   z-index: 1;
    25.   border: dashed;
    26.   height: 8em;
    27.   margin-bottom: 1em;
    28.   margin-top: 2em;
    29. }
    30. .square-2 {
    31.   position: absolute;
    32.   z-index: 2; 
    33.   background: black;
    34.   width: 65%;
    35.   left: 60px;
    36.   top: 3em;
    37. }
    38. .square-3 {
    39.   position: absolute;
    40.   z-index: 3; 
    41.   background: lightgreen;
    42.   width: 20%;
    43.   left: 65%;
    44.   top: -25px;
    45.   height: 7em;
    46.   opacity: 0.9;
    47. }
    48.  
    49. </style>
    50. </head>
    51. <body>
    52. <div class="square-set">
    53.   <figure class="square square-1">SQUARE 1</figure>
    54.   <figure class="square square-2">SQUARE 2</figure>
    55.   <figure class="square square-3">SQUARE 3</figure>
    56. </div>
    57. </body>
    58. </html>

    在图像上定位文本

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

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. .module{
    6.   background: 
    7.     linear-gradient{
    8.       rgba(0, 4, 5, 0.6),
    9.       rgba(2, 0, 3, 0.6)
    10.     ),
    11.     url(http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/43098-DSC_64xx_landscape-keltern-1_wall.jpg);
    12.   background-size: cover;
    13.   width: 600px;
    14.   height: 400px;
    15.   margin: 10px 0 0 10px;
    16.   position: relative;
    17.   float: left;
    18. }
    19. .mid h3 {
    20.   font-family: Helvetica;
    21.   font-weight: 900;
    22.   color: white;
    23.   text-transform: uppercase;
    24.   margin: 0;
    25.   position: absolute;
    26.   top: 30%;
    27.   left: 50%;
    28.   font-size: 3rem;
    29.   transform: translate(-50%, -50%);
    30. }
    31. </style>
    32. </head>
    33. <body>
    34. <div class="module mid">
    35.   <h3>Wild nature</h3>
    36. </div>
    37. </body>
    38. </html>

    结论

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

  • 相关阅读:
    MySql学习笔记05——DML
    QChart柱状图
    黑客专业术语认知
    3D抓取算法的介绍
    网络安全（黑客）自学
    【2011年数据结构真题】
    矩阵的行列式的计算及其源码
    HMI-64-【多媒体】Ui全部制作完成
    【问题思考总结】块和页框的大小相等吗？（从抽象层次的角度思考）
    【Redis7】--1.概述、安装和配置
  • 原文地址：https://blog.csdn.net/allway2/article/details/125608168