CSS定位

最新推荐文章于 2024-10-11 15:51:17 发布

齐白在学习

最新推荐文章于 2024-10-11 15:51:17 发布

阅读量480

点赞数 4

文章标签： css html css3

本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127151625

版权

为什么需要定位

在介绍定位之前，我们要先说一下正常的布局流。

正常的布局流是将元素放置在浏览器视口内的系统。默认情况下，块级元素(block)在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。内联元素（inline）表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。外边距折叠指的是两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的外边距消失。

而定位的整个想法是允许我们覆盖上面描述的基本文档流行为，产生更好的效果。假如我们需要将元素设定在一个特定的位置，采用正常的布局流程位置是有些困难的。比如我们有一个导航栏需要一直固定在界面顶部，如果正常布局流，我们下拉界面，导航栏则会消失。由此，这里引入定位的概念，可以解决上述问题。

position 属性

要将元素产生定位效果，我们使用position属性，并有以下5种定位。

static
relative
fixed
absolute
sticky

static

静态定位是每个元素获取的默认值——静态定位就是正常的布局流，被设定静态定位的元素不会以任何特殊方式定位，它始终根据页面的正常流进行布局：只要添加position: static，则实现静态定位。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Static positioning</title>

    <style>
      body {
        width: 500px;
        margin: 0 auto;
      }

      p {
        background: skyblue;
        border: 3px solid pink;
        padding: 10px;
        margin: 10px;
      }

      span {
        background: white;
      }

      .positioned {
        position: static;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <h1>Static</h1>

    <p>静态定位就是正常的布局流</p>

    <p class="positioned">“将元素放入它在文档布局流中的正常位置</p>

    <p>静态定位就是浏览器的默认布局流</p>

    <p>block<span>span</span> and <span>span</span> block <span>span</span>block </p>

  </body>
</html>

relative

相对定位指的是相对于其正常位置进行定位，通过增加position: relative实现相对定位。

那么什么是正常位置呢？正常位置指得是改变元素本来处于正常流的位置，在已经设置相对定位属性的元素，我们可以设置top、right、bottom 和 left 属性将其偏离正常位置进行调整，但是不会改变其余元素的位置。我们看以下例子：

.positioned {
   position: relative;
   background: yellow;
   top:20px;
   left:20px;
}

我们可以看到设置了relative的元素偏离后距离正常位置上边界：20px，距离正常位置的左边界20px。

absolute

在介绍绝对定位前，我们先修改上述例子，通过增加position: absolute实现绝对定位。

      body {
        width: 500px;
        margin: 0 auto;
        position: relative;
      }

      .positioned {
        position: absolute;
        background: yellow;
        top:20px;
        left:20px;
      }

我们发现我们设置了绝对位置的元素靠近左上角，其余元素正常靠在一起。

我们引入绝对位置的概念：绝对定位的元素不再存在于正常文档布局流中。相反，它作用在它自己的层并独立于一切。这意味着我们可以创建不干扰页面上其他元素的位置的隔离的 UI 功能。例如，弹出信息框和控制菜单等。

实际上：绝对定位的元素也可以说是相对于最近的祖先元素进行定位。那么什么是祖先元素？祖先元素指的是父元素设置了relative的元素。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），因为我们在 HTML 源代码中，<body>有设置relative属性，并随页面滚动一起移动。也就是我们上述例子，使元素在页面的左上角位置。

在这里我们还要介绍一下z-index这个属性。在我们界面中，假如出现了元素重叠的现象，重叠元素哪个放在上面与下面则可以设置z-index来控制，也就与ps图层一样。

fixed

position: fixed; 的元素是相对于浏览器视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。一般来说我们可以设置fixed做导航栏。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Static positioning</title>

    <style>
      body {
        width: 500px;
        margin: 0 auto;
        position: relative;
      }

      p {
        background: skyblue;
        border: 3px solid pink;
        padding: 10px;
        margin: 10px;
      }

      span {
        background: white;
      }

      .positioned {
        position: absolute;
        background: yellow;
        top:20px;
        left:20px;
      }
      .fixed{
        position: fixed;
        top:20px;
        left:20px;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <h1 class="fixed">fixed</h1>

    <p >fixed</p>

    <p class="positioned">这里是通过添加了top，right偏离后的元素</p>

    <p >位置向上移动</p>

    <p>block<span>span</span> and <span>span</span> block <span>span</span>block </p>

  </body>
</html>

sticky

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Static positioning</title>

    <style>
      body {
        width: 500px;
        margin: 0 auto;
        position: relative;
      }

      p {
        background: skyblue;
        border: 3px solid pink;
        padding: 10px;
        margin: 10px;
      }

      span {
        background: white;
      }

      .positioned {
        position: sticky;
        background: yellow;
        top:30px;
        left:30px;
      }
    </style>
  </head>
  <body>
    <h1>sticky</h1>

    <p >sticky</p>

    <p class="positioned">通过移动界面下拉，这里开始会移动后来将会固定在顶部</p>

    <p >位置向上移动</p>

    <p>block<span>span</span> and <span>span</span> block <span>span</span>block </p>

  </body>
</html>