1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

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

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

定位类型术语:

  • 定位元素(positioned element): positionrelativeabsolutefixedsticky 之一的元素(除了 static 以外的定位 )。
  • 相对定位元素(relatively positioned element): positionrelative 的元素。
  • 绝对定位元素(absolutely positioned element): positionabsolutefixed 的元素。
  • 粘性定位元素(stickily positioned element): positionsticky 的元素。

relative

relative 可以使得元素依旧占用原先的页面空间,并且可以使用 leftrighttopbottom 相对于原先的位置进行定位。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/ExbJVdp?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

absolute

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyJQPP?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

fixed

fixed 使得元素不再占用原先的页面空间,使用 leftrighttopbottom 相对于浏览器窗口进行定位。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/YzEBeze?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

fixed 水平居中

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/jOadzBw?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

fixed 垂直居中

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKZVpJp?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/zYprGbw?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

sticky

sticky 使得元素针对它最近的滚动祖先元素( overflowvisible 以外的元素)的内容区边缘有着一个 leftrighttopbottom 设定的最小间距。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/PoOVEvd?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

堆叠层级

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/qBpaVep?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

$$warning

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

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

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/yLpapyJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

1.完成以下实例。

$$demo

<div class="comment">

<span>评论</span>

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

</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;

color: white;

padding: 0 5px;

border-radius: 10px;

top: -10px;

right: -10px;

}

</style>

$$

2.完成以下实例。

$$tip

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

$$

$$demo

<div class="message">

<span>消息</span>

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

</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: 1px 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> <div class="info right">这是一段来自右边的提示</div> </div> </div> </div> <style> :root { box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */ } *, *:before, :after { box-sizing: border-box; / 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: calc(100% + 20px); left: 0; } .bottom { top: calc(100% + 20px); left: 0; } .right { left: calc(100% + 20px); top: 0; } </style>

$$