Version: Next

定位

实例：

不动的侧边栏

网页底部的返回顶部按钮一直固定在底部

相对定位
绝对定位
固定定位
z-index （层级问题）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid black;
            padding: 0;
        }

        #first {
            border: 1px dashed pink;
            background-color: pink;
        }

        #second {
            border: 1px dashed blue;
            background-color: blue;
        }

        #third {
            border: 1px dashed green;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>

相对定位

相对于自己原来的位置，进行偏移

支持上下左右

top：距离上面20px
left：距离左边20px，即向右移动20px
right：距离右边20px，即向左移动20px
bottom：距离底部20px，即向上移动20px

position: relative; /*相对定位，上下左右*/
top: -20px;  /*向上移动20px*/
left: 20px   /*向右移动20px*/

元素仍在标准文档流中，原来的位置会被保留

绝对定位

相对于浏览器边框定位

元素不在标准文档流中，原来的位置没了

父级元素没有定位属性时，相对于浏览器边框定位

position: absolute;
right: 20px; /*距离浏览器右侧边框20px*/

父级元素为相对定位时，相对于父级元素定位

#father {
    border: 1px solid black;
    padding: 0;
    position: relative; /*父级元素相对定位*/
}

#first {
    border: 1px dashed pink;
    background-color: pink;
    position: absolute;      
    right: 30px;        /*相对于父级元素右侧30px*/
}

固定定位

实例：固定不动的导航栏

positon: fixed

一直固定在指定坐标上

body {
    height: 1000px;
}

div {
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}

#father {
    border: 1px solid black;
    padding: 0;
}

#first {
    border: 1px dashed pink;
    background-color: pink;
    position: absolute;
    bottom: 0;
    right: 0;
}

#second {
    border: 1px dashed blue;
    background-color: blue;
    position: fixed;
    bottom: 0;
    right: 0;
}

z-index

可以模仿一下b站首页视频略缩图上的小弹幕

<div id="content">
    <ul>
        <li><img src="../image/2.png"/></li>
        <li class="tipText">学习轮播图</li>
        <li class="tipBg"></li>
        <li>时间：2020-09-09</li>
        <li>地点：非洲</li>
    </ul>
</div>

取消列表前面的圆点，加一个边框

#content {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
    width: 285px;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

让下面的文字定位到图片上，但在图片底部。

父级元素相对定位
子级元素绝对定位

#content ul {
    position: relative;
}

.tipText, .tipBg {
    position: absolute;
    bottom: 73px;
    height: 25px;
    width: 285px;
}

.tipBg {
    background-color: black;
}

背景条覆盖了文字，我们要通过z-index属性，调整图层上下关系

值越大，优先级越高，可以覆盖别的图层

.tipText{
    z-index: 999;
}

透明度

让粉色背景条变为半透明

.tipBg {
    background-color: pink;
    opacity: 50%;
}

也可以不调节文字的z-index属性，直接让背景条办透明，看起来更像真实弹幕

.tipText {
    /*z-index: 999;*/
}

.tipBg {
    background-color: pink;
    opacity: 50%;
}

定位#

相对定位#

绝对定位#

固定定位#

z-index#

透明度#

定位

相对定位

绝对定位

固定定位

z-index

透明度