position 属性用于设置元素在页面中的定位方式，有以下取值：

static：默认值，正常布局。
relative：相对于正常位置进行定位，依旧占用原先的页面空间。
absolute：相对于除 static 定位以外最近的一个祖先元素进行定位，不再占用原先的页面空间。
fixed：相对于浏览器窗口进行定位，不再占用原先的页面空间。
stick：根据正常位置进行定位，相对最近的滚动祖先元素进行偏移。

定位类型术语：

定位元素（positioned element）： position 为 relative 、 absolute 、 fixed 、 sticky 之一的元素（除了 static 以外的定位）。
相对定位元素（relatively positioned element）： position 为 relative 的元素。
绝对定位元素（absolutely positioned element）： position 为 absolute 或 fixed 的元素。
固定定位元素（fixed positioned element）： position 为 fixed 的元素。
粘性定位元素（stickily positioned element）： position 为 sticky 的元素。

relative

relative 可以使得元素依旧占用原先的页面空间，并且可以使用 left 、 right 、 top 、 bottom 相对于原先的位置进行定位。

absolute

absolute 使得元素不再占用原先的页面空间，使用 left 、 right 、 top 、 bottom 相对于除 static 定位以外最近的一个祖先元素进行定位。

fixed

fixed 使得元素不再占用原先的页面空间，使用 left 、 right 、 top 、 bottom 相对于浏览器窗口进行定位。

fixed 水平居中

对于 position: fixed; 的元素可以设置以下的样式使其水平居中。

left: 0;
right: 0;
margin: 0 auto;

fixed 垂直居中

对于 position: fixed; 的元素可以设置以下的样式使其垂直居中。

top: 0;
bottom: 0;
margin: auto 0;

fixed 宽高自适应的垂直水平居中

如果将元素的宽高属性值去掉想让元素宽高自适应内容，会导致元素的宽或高被拉伸至视窗的长度。想让宽或高自适应可能通过设置 max-content 属性值完成。

absolute 居中

同理， absolute 可以相对定位的元素水平或垂直居中。

<div class="outer">
    <div class="inner"></div>
</div>
<style>
    .outer {
        position: relative;

        width: 200px;
        height: 200px;

        background-color: pink;
    }

    .inner {
        position: absolute;

        width: 50px;
        height: 50px;

        background-color: teal;

        top: 0;
        bottom: 0;
        right: 0;
        left: 0;

        margin: auto;
    }
</style>

$$demo <div class="outer"> <div class="inner"></div> </div> <style> .outer { position: relative;

    width: 200px;
    height: 200px;

    background-color: pink;
}

.inner {
    position: absolute;

    width: 50px;
    height: 50px;

    background-color: teal;

    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    margin: auto;
}

</style>

sticky

sticky 使得元素针对它最近的滚动祖先元素（ overflow 为 visible 以外的元素）的内容区边缘有着一个 left 、 right 、 top 、 bottom 设定的最小间距。

堆叠层级

z-index 属性设置当定位元素发现重叠时，它们之间的层级关系，取值是数字，数值越小层级越低。默认值为 auto ，一般当作层级为 0 。

$$warning

元素的层级会受到父元素的限制，设定层级的作用只能发生在兄弟元素之间。

$$ 示例中的 .inner-box 的 z-index 尽管设置成了很大的数值，仍旧无法显示在 .box 之上。

练习

1.完成以下实例。

$$tip

注意小圆点有一圈白色的轮廓。

$$ $$demo

</div>

<style>

.comment {

position: relative;

display: inline-block;

padding: 5px 20px;

border: 2px solid #333;

cursor: default;

margin: 0 10px;

font-size: 14px;

}

.number {

position: absolute;

font-size: 10px;

background-color: #f56c6c; outline: 2px solid white;

color: white;

padding: 0 5px;

border-radius: 10px;

top: -10px;

right: -10px;

}

</style>

$$answer

<div class="comment">
    <span>评论</span>

    <div class="number">12</div>
</div>

<style>
    .comment {
        position: relative;
        display: inline-block;

        padding: 5px 20px;
        margin: 0 10px;

        font-size: 14px;
        border: 2px solid #333;

        cursor: default;
    }

    .number {
        position: absolute;
        font-size: 10px;

        background-color: #f56c6c;
        outline: 2px solid white;
        color: white;

        padding: 0 5px;
        border-radius: 10px;

        top: -10px;
        right: -10px;
    }
</style>

2.完成以下实例。

$$demo

</div>

<style>

.message {

position: relative;

display: inline-block;

padding: 5px 20px;

border: 2px solid #333;

cursor: default;

margin: 0 10px;

font-size: 14px;

}

.alert {

position: absolute;

background-color: #f56c6c;

width: 10px;

height: 10px;

border-radius: 50%;

outline: 2px solid white;

top: -5px;

right: -5px;

}

</style>

$$answer

<div class="message">
    <span>消息</span>

    <div class="alert"></div>
</div>

<style>
    .message {
        position: relative;
        display: inline-block;

        font-size: 14px;

        border: 2px solid #333;
        padding: 5px 20px;
        margin: 0 10px;
        cursor: default;
    }

    .alert {
        position: absolute;

        background-color: #f56c6c;

        width: 10px;
        height: 10px;

        border-radius: 50%;

        outline: 2px solid white;

        top: -5px;
        right: -5px;
    }
</style>

3.补全以下代码达到实例的效果。

<div class="container">
    <div class="tip">
        <span>左边的提示</span>
        <div class="info left">这是一段来自左边的提示</div>
    </div>
    <div class="tip">
        <span>上方的提示</span>
        <div class="info top">这是一段来自上方的提示</div>
    </div>
    <div class="tip">
        <span>下方的提示</span>
        <div class="info bottom">这是一段来自下方的提示</div>
    </div>
    <div class="tip">
        <span>右边的提示</span>
        <div>
            <div class="info right">这是一段来自右边的提示</div>
        </div>
    </div>
</div>
<style>
    :root {
        box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
    }
    *,
    *:before,
    *:after {
        box-sizing: inherit; /* box-sizing 继承自父元素 */
    }
    .container {
        margin: 100px 0;
        text-align: center;
    }
    .tip {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #333;
        cursor: default;
        margin: 0 10px;
    }
    .info {
        display: none;
        position: absolute;
        background-color: teal;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        padding: 10px;
        width: max-content;
    }
    .tip:hover .info {
        display: block;
    }
    .left {
        right: calc(100% + 20px);
        top: 0;
    }
    .top {
        /* 补全这里 */
    }
    .bottom {
        /* 补全这里 */
    }
    .right {
        /* 补全这里 */
    }
</style>

$$demo

<div class="container"> <div class="tip"> <span>左边的提示</span> <div class="info left">这是一段来自左边的提示</div> </div> <div class="tip"> <span>上方的提示</span> <div class="info top">这是一段来自上方的提示</div> </div> <div class="tip"> <span>下方的提示</span> <div class="info bottom">这是一段来自下方的提示</div> </div> <div class="tip"> <span>右边的提示</span> <div class="info right">这是一段来自右边的提示</div> </div> </div> <style> :root { box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */ } *, *:before, :after { box-sizing: border-box; / box-sizing 继承自父元素 */ } body { padding: 1px;} .container { margin: 100px 0; text-align: center; } .tip { position: relative; display: inline-block; padding: 10px 20px; border: 2px solid #333; cursor: default; margin: 0 10px; } .info { display: none; position: absolute; background-color: teal; border-radius: 4px; color: white; font-size: 14px; padding: 10px; width: max-content; } .tip:hover .info { display: block; } .left { right: calc(100% + 20px); top: 0; } .top { bottom: calc(100% + 20px); left: 0; } .bottom { top: calc(100% + 20px); left: 0; } .right { left: calc(100% + 20px); top: 0; } </style>

$$answer

<div class="container">
    <div class="tip">
        <span>左边的提示</span>
        <div class="info left">这是一段来自左边的提示</div>
    </div>
    <div class="tip">
        <span>上方的提示</span>
        <div class="info top">这是一段来自上方的提示</div>
    </div>
    <div class="tip">
        <span>下方的提示</span>
        <div class="info bottom">这是一段来自下方的提示</div>
    </div>
    <div class="tip">
        <span>右边的提示</span>
        <div class="info right">这是一段来自右边的提示</div>
    </div>
</div>
<style>
    :root {
        box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
    }
    *,
    *:before,
    *:after {
        box-sizing: border-box; /* box-sizing 继承自父元素 */
    }
    body {
        padding: 1px;
    }
    .container {
        margin: 100px 0;
        text-align: center;
    }
    .tip {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #333;
        cursor: default;
        margin: 0 10px;
    }
    .info {
        display: none;
        position: absolute;
        background-color: teal;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        padding: 10px;
        width: max-content;
    }
    .tip:hover .info {
        display: block;
    }
    .left {
        right: calc(100% + 20px);
        top: 0;
    }
    .top {
        bottom: calc(100% + 20px);
        left: 0;
    }
    .bottom {
        top: calc(100% + 20px);
        left: 0;
    }
    .right {
        left: calc(100% + 20px);
        top: 0;
    }
</style>

完成以下实例效果。

点击打开提示实例

$$answer

<div class="alert">你的网费不足 10 元，请充值！</div>
<style>
    .alert {
        position: fixed;

        width: max-content;
        height: max-content;

        display: inline-block;

        background-color: pink;

        top: 100px;
        left: 0;
        right: 0;

        margin: auto;

        padding: 20px 40px;

        font-weight: bold;

        border-radius: 8px;
    }
</style>

完成以下实例效果。

点击打开咨询实例

$$answer

<div class="question">
    <div class="label">?</div>
    <div class="inner-box">
        <div class="prompt">有问题请联系 QQ: 123456</div>
    </div>
</div>
<style>
    .question {
        position: fixed;

        right: 20px;
        bottom: 20px;
    }

    .question:hover .inner-box {
        display: block;
    }

    .question .label {
        width: 60px;
        height: 60px;

        font-size: 36px;
        font-weight: bold;

        text-align: center;
        line-height: 60px;

        background-color: teal;
        color: white;

        border-radius: 50%;

        cursor: default;
    }

    .question .inner-box {
        position: absolute;

        display: none;

        right: 100%;
        bottom: 0;

        padding-right: 40px;
    }

    .question .prompt {
        background-color: pink;

        padding: 20px;

        width: max-content;

        border-radius: 16px;
        font-weight: bold;
    }
</style>

完成以下实例效果。 $$demo <div class="container"> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1 class="title">三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> <h1>三眼鸭的编程教室</h1> </div> <style> .container { height: 300px; overflow: auto; } .title { color: teal; background-color: pink;
```
 position: sticky;
 top: 20px;
```
} </style>

$$answer


<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1 class="title">三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<h1>三眼鸭的编程教室</h1>
<style>
    .title {
        color: teal;
        background-color: pink;

        position: sticky;
        top: 20px;
    }
</style>