CSS学习记录06相对定位、绝对定位、固定定位和z-index

Jatine

已于 2022-02-08 10:44:12 修改

阅读量687

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-02-08 10:42:18 首次发布

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122815833

版权

前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

- CSS学习记录06相对定位、绝对定位、固定定位和z-index

CSS学习记录06相对定位、绝对定位、固定定位和z-index

position 的四个值：static、relative、absolute、fixed。
绝对定位：absolute 和 fixed 统称为绝对定位
相对定位：relative
默认值：static

6.1相对定位

position: relative;
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #4f4c4c;
        }
        #first{
            background-color: #3cbda6;
            border: 1px dashed #988405;
        }
        #second{
            background-color: #1ee018;
            border: 1px dashed #6084e0;
        }
        #third{
            background-color: #e38820;
            border: 1px dashed #d71f50;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述
让第一个盒子偏上20px，偏右10px

position: relative;
top: -20px;
left: 10px;

在这里插入图片描述

注意：

相对定位是相对原来的位置进行指定的偏移，如果top:20px;则是距原来的顶部向下20px。
四个方向：
上top
左left
下bottom
右right
相对于原来的位置进行指定偏移后，仍然在标准文档流中，并不像浮动那样浮出去，原来的位置会被保留。

小作业：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px red solid;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ed5736;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #4646ef;
        }
        .a2{
            position: relative;
            left: 200px;
            bottom: 100px;
        }
        .a4{
            position: relative;
            left: 200px;
            bottom: 100px;
        }
        .a5{
            position: relative;
            left: 100px;
            bottom: 300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

在这里插入图片描述

6.2绝对定位

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

没有父级元素定位的前提下，相对于浏览器定位
若父级元素存在定位，通常会相对于父级元素进行偏移
在父级元素范围内移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #4f4c4c;
        }
        #first{
            background-color: #3cbda6;
            border: 1px dashed #988405;
        }
        #second{
            background-color: #1ee018;
            border: 1px dashed #6084e0;
            position: absolute;
        }
        #third{
            background-color: #e38820;
            border: 1px dashed #d71f50;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述
父级没有定位：

		#second{
            background-color: #1ee018;
            border: 1px dashed #6084e0;
            position: absolute;
            left: 30px;
        }

在这里插入图片描述
父级有定位：

		#father{
            border: 1px solid #4f4c4c;
            position: relative;
        }

在这里插入图片描述

注意div存在15的边距
绝对定位相对于父级或浏览器的位置进行指定偏移，不在标准文档流中，原来的位置不会被保留。

6.3固定定位fixed

引例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位，相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

在这里插入图片描述
固定定位的div2，无论页面怎么滑动，始终固定在右下角
常用于页面“返回顶部”

6.4z-index

层级概念
在这里插入图片描述
层级从0层开始，0层为最低层级

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/3.jpg"></li>
        <li class="tipText">图片描述</li>
        <li class="tipBg"></li>
        <li>时间：2020-1-1</li>
        <li>地点：月球</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 400px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    color: #FFE78B;
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 400px;
    height: 25px;
    top:690px;
}

在这里插入图片描述
给“图片描述”添加黑色背景：

.tipBg{
    background: #000;
}

在这里插入图片描述
文字被覆盖
这时候给文字设置一个高于黑色背景的层级，文字就显现出来了：

.tipText{
    z-index: 2;
}

在这里插入图片描述
让黑色背景透明一些：

.tipBg{
    background: #000;
    opacity: 0.5;
}

在这里插入图片描述

此时，我想到了最近刚做的QQ会员导航栏

目前官方页面是这样的：
在这里插入图片描述
导航栏明显是有透明度，于是下载官网的背景图片，自己调整一下：
首先添加网页背景图片：<img src="img/bg_index.jpg">

导航栏被顶下去了，这不就是固定定位吗？

	position: fixed;
    top: 0;

在这里插入图片描述
最后设置透明度：

opacity: 0.7;

在这里插入图片描述
但是，真正的透明设置肯定不是这么简单，因为在设置透明的同时，导航栏上的logo及文字、按钮等也都改变了透明度，这不是我们想看到的。经查，可用linear-gradient实现：

.nav-header {
    height: 90px;
    width: 100%;
    background: linear-gradient(rgb(25, 25, 30,0.7),rgb(25, 25, 30,0.7));
    position: fixed;
    top: 0;
}

在这里插入图片描述
具体用法详见：《linear-gradient()的用法》作者：Favour丶in

Jatine

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习记录06相对定位、绝对定位、固定定位和z-index

文章目录CSS学习记录06定位6.1相对定位6.3绝对定位6.4z-indexCSS学习记录06定位position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static6.1相对定位position: relative;案例：<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫

专栏目录