CSS 中的定位(position)布局，是什么？

原创

Learn-anything.cn

发布于 2021-12-10 18:11:36

5330

发布于 2021-12-10 18:11:36

文章被收录于专栏：learn-anything.cn

一、定位布局是什么？

使用 position、left、right、top、bottom，可以改变元素现有位置，譬如让元素从正常布局流中跳出来，固定在页面某个位置上。

二、使用场景

1、position: static

这是元素的默认值，表示按照正常布局流进行排列元素（浏览器默认展示方式）。此时 top, right, bottom, left 和 z-index 属性无效。

2、position: relative

以现有位置为坐标进行偏移，元素不会被移出正常文档流，原有区域会留下空白。新建文件 index.html 并复制下面到文件，用浏览器打开 index.html 看效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Relative positioning</title>

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

        p {
            background: aqua;
            border: 3px solid blue;
            padding: 10px;
            margin: 10px;
        }

        span {
            background: red;
            border: 1px solid black;
        }

        .positioned {
            /* static 等同于正常布局流排列方式 */
            position: relative;
            background: yellow;
            top: 30px;
            left: 30px;
        }
    </style>
</head>

<body>
    <h1>Relative positioning</h1>

    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

    <p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child
        content. Our total width and height is our content + padding + border width/height.</p>

    <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
        margins, not both.</p>

    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
        adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
            if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
        will do: <img src="long.jpg"></p>

</body>

</html>

3、position: absolute

根据最近非 static 祖先元素进行偏移，元素会被移出正常文档流，但不会有空白。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。新建文件 index.html 并复制下面到文件，用浏览器打开 index.html 看效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Absolute positioning</title>

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

        p {
            background: aqua;
            border: 3px solid blue;
            padding: 10px;
            margin: 10px;
        }

        span {
            background: red;
            border: 1px solid black;
        }

        .positioned {
            /* static 等同于正常布局流排列方式 */
            position: absolute;
            background: yellow;
            top: 30px;
            left: 30px;
        }
    </style>
</head>

<body>
    <h1>Absolute positioning</h1>

    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

    <p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child
        content. Our total width and height is our content + padding + border width/height.</p>

    <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
        margins, not both.</p>

    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
        adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
            if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
        will do: <img src="long.jpg"></p>

</body>

</html>

4、position: fixed

用页面作为坐标来偏移，元素会被移出正常文档流，但不会有空白。页面滚动时元素的位置不会改变。导航菜单就可以用 fixed 来定位。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Fixed positioning</title>

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

    p {
      background: aqua;
      border: 3px solid blue;
      padding: 10px;
      margin: 10px;
    }

    span {
      background: red;
      border: 1px solid black;
    }

    h1 {
      position: fixed;
      top: 0px;
      width: 500px;
      margin-top: 0;
      background: white;
      padding: 10px;
    }

    p:nth-of-type(1) {
      margin-top: 60px;
    }
  </style>
</head>

<body>
  <h1>Fixed positioning</h1>

  <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

  <p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the
    <code>&lt;html&gt;</code> element!</p>

  <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins,
    not both.</p>

</body>

</html>

5、position: sticky

根据最近滚动祖先进行偏移，元素不会被移出正常文档流，不会影响其他元素。元素可以正常移动，但是到指定位置后固定起来。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Sticky positioning</title>

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

    dt {
      background-color: black;
      color: white;
      padding: 10px;
      position: sticky;
      top: 0;
      left: 0;
      margin: 1em 0;
    }
  </style>
</head>

<body>
  <h1>Sticky positioning</h1>

  <dl>
    <dt>A</dt>
    <dd>Apple</dd>
    <dd>Ant</dd>
    <dd>Altimeter</dd>
    <dd>Airplane</dd>
    <dt>B</dt>
    <dd>Bird</dd>
    <dd>Buzzard</dd>
    <dd>Bee</dd>
    <dd>Banana</dd>
    <dd>Beanstalk</dd>
    <dt>C</dt>
    <dd>Calculator</dd>
    <dd>Cane</dd>
    <dd>Camera</dd>
    <dd>Camel</dd>
    <dt>D</dt>
    <dd>Duck</dd>
    <dd>Dime</dd>
    <dd>Dipstick</dd>
    <dd>Drone</dd>
    <dt>E</dt>
    <dd>Egg</dd>
    <dd>Elephant</dd>
    <dd>Egret</dd>
  </dl>


</body>

</html>

6、relative + absolute

如果父元素设置了 position: relative;，子元素设置了 position: absolute; ，那么子元素就用相对于父元素的位置进行偏移。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Positioning context</title>

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

        p {
            background: aqua;
            border: 3px solid blue;
            padding: 10px;
            margin: 10px;
        }

        span {
            background: red;
            border: 1px solid black;
        }

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

<body>
    <h1>Positioning context</h1>

    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

    <p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the
        <code>&lt;html&gt;</code> element!</p>

    <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
        margins, not both.</p>

    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
        adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
            if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
        will do: <img src="long.jpg"></p>

</body>

</html>

7、z-index

多个元素在同一个位置显示时，可用 z-index 属性决定哪个元素在最上面， z-index 数值最大者，显示在最上面。试着修改下面 z-index 的值，看看效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>z-index</title>

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

        p {
            background: aqua;
            border: 3px solid blue;
            padding: 10px;
            margin: 10px;
        }

        span {
            background: red;
            border: 1px solid black;
        }

        .positioned {
            position: absolute;
            background: yellow;
            top: 30px;
            left: 30px;
            z-index: 1;
        }

        p:nth-of-type(1) {
            position: absolute;
            background: lime;
            top: 10px;
            right: 30px;
            z-index: 2;
        }
    </style>
</head>

<body>
    <h1>z-index</h1>

    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

    <p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the
        <code>&lt;html&gt;</code> element!</p>

    <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
        margins, not both.</p>

    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
        adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
            if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
        will do: <img src="long.jpg"></p>

</body>

</html>

三、参考文档

CSS 中的定位(position)布局，是什么？

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

登录后参与评论

0 条评论

热度