CSS学习记录7/定位流分类/相对定位与绝对定位配合使用案例/焦点图/z-index属性/从父现象

小婵婵不怕鬼

已于 2022-06-30 14:56:26 修改

阅读量349

点赞数 1

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

于 2022-06-30 13:31:27 首次发布

本文链接：https://blog.csdn.net/qq_49080239/article/details/125522991

版权

css学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

定位流分类：

1、相对定位
2、绝对定位
3、固态定位
4、静态定位

什么是相对定位？
相对定位就是相对于子以前在标准流中的位置来移动。

相对定位的注意点：
1、相对定位不脱离标准流，会继续在标准流中占用一份空间。
2、position: relative;需要配合top、right、left、bottom来使用。
3、同一个方向上的定位属性只能使用一个。
4、由于相对定位不脱离标准流，所以相对定位中区分行内元素、块级元素和行内款及元素。
5、由于相对定位不脱离标准流，并且相对定位的元素会占用标准流的位置，所以相对定位的元素设置margin、padding等属性的时候会影响到标准流的布局。
6、设置margin属性是相对于元素定位之前的位置。

应用场景：
对元素进行微调：如验证码图片
配合绝对定位使用

什么是绝对定位？
绝对定位是相对于body定位。

绝对定位注意点：
1、绝对定位的元素是脱离标准流的。
2、绝对定位的元素不区分块级元素、行内元素、行内块级元素。

规律：
1、默认情况下绝对定位元素无论有没有祖先元素，都会以body作为参考点。
2、position: absolute;需要配合top、right、left、bottom来使用。
3、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对元素就会以定位流的那个祖先元素作为参考点。（只要是绝对定位元素的祖先元素都可以，指的定位流是绝对定位、相对定位和固定定位，定位流中只有静态定位不行）
4、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点。

*注意点：
1、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点。
2、一个绝对定位的元素会忽略祖先元素的padding。

相对定位弊端：相对定位不会推理标准流，会在标准流中占用一份空间，所以不利于布局界面。
绝对定位弊端：默认情况下绝对定位的会以body作为参考点所以会随着浏览器的宽度高度的变化而变化。
相对定位配合绝对定位：子绝父相。子元素用绝对定位，父元素用相对定位。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            width: 800px;
            height: 50px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: #ffcaf3;
        }
        li{
            float: left;
            width: 100px;
            line-height: 50px;
            text-align: center;
            background-color: #ccc;
        }
        ul li:nth-of-type(4){
            background-color: #efefef;
            position: relative;
        }
        /*使用相对定位*/
        /*img{*/
        /*    position: relative;*/
        /*    top: -18px;*/
        /*    left: -42px;*/
        /*}*/
        /*使用绝对定位*/
        /*img{*/
        /*    position: absolute;*/
        /*    left: 550px;*/
        /*    top: 90px;*/
        /*}*/
        /*相对定位配合绝对定位*/
        img{
            position: absolute;
            top: -11px;
            /*left: 35px;*/
            left: 50%;
            margin-left: -16.5px;/*设置绝对定位水平居中*/
        }
    </style>
</head>
<body>
<ul>
    <li>服装城</li>
    <li>美妆馆</li>
    <li>京东超市</li>
    <li>全球购
        <img src="images/xiaotu.png" alt="">
    </li>
    <li>闪购</li>
    <li>团购</li>
    <li>拍卖</li>
    <li>金融</li>
</ul>
</body>
</html>

结果：
在这里插入图片描述
如何让绝对定位的元素水平居中？
只需要设置绝对定位元素的left: 50%;然后再设置绝对定位元素的margin-left: -元素宽度的一般px。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品热卖</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 2px solid #cccccc;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        div img{
            width: 300px;
            height: 200px;
        }
        .hot{
            background: url(images/re.png) no-repeat -2px -2px;
            width: 37px;
            height: 32px;
            /*display: inline-block;*/
            position: absolute;
            left: 0;
            top: 0;
        }
        .price{
            background: url("images/qian.png") no-repeat 0 0;
            width: 134px;
            height: 45px;
            /*display: inline-block;*/
            position: absolute;
            left: -7px;
            top: 157px;
            text-align: center;
            line-height: 45px;
            color: red;
            font-size: 25px;
            font-weight: bold;
            font-family: "宋体";
        }
        p{
            font-size: 10px;
        }
    </style>
</head>
<body>
<div>
    <img src="images/meishi.webp">
    <span class="hot"></span>
    <span class="price">56</span>
    <p>【2店通用】love甜一下 双人套餐，赠送小寸蛋挞一个，提供免费WiFi</p>
</div>
</body>
</html>

结果：
团购界面
焦点图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点图</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        div{
            width: 520px;
            height: 285px;
            border: 2px solid yellow;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        span{
            width: 40px;
            background-color: rgba(0,0,0,0.3);
            margin-top: 10px;
            display: block;
            font-size: 50px;
            color: white;
            text-align: center;
            line-height: 80px;
        }
        .zuo{
            position: absolute;
            top: 100px;
            left: 0;
        }
        .you{
            position: absolute;
            top: 100px;
            right: 0;
        }
        ol{
            list-style: none;
            width: 300px;
            height: 50px;
            background-color: rgba(255,255,255,0.3);
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -142.5px;
        }
        li{
            width: 60px;
            height: 50px;
            border: 1px solid black;
            float: left;
            box-sizing: border-box;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="images/qq5.jpg" alt="">
    <span class="zuo">&lt;</span>
    <span class="you">&gt;</span>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li></ol>
</div>
</body>
</html>

结果：
焦点图
固定定位：可以让某一元素不随着滚动条的滚动而滚动。
position: fixed;
注意点：
1、固定定位的元素是脱离标准流的，不会占用标准流中的空间。
2、固定定位的元素不区分块级元素、行内元素、行内块级元素。

新浪首页练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪首页</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 100%;
            height: 60px;
            /*background-color: #ffcaf3;*/
            background: url(images/xinlangdaohang.png) no-repeat center top;
            position: fixed;
            top: 0;
        }
        .content{
            width: 100%;
            height: 9000px;
            background-color: #ffada3;
            background: url("images/xinlangneirong.png");
        }
        div img:first-child{
            position: fixed;
            right: 0;
            top: 450px;
        }
        div img:last-child{
            position: fixed;
            left: 0;
            top: 720px;
        }
        a{
            width: 64px;
            height: 64px;
            background: url("images/fanhuidingbu.png") no-repeat;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
<div class="nav"></div>
<div class="content">
    <img src="images/guangao.png">
    <img src="images/guanggao2.png">

</div>

<a href="#"></a>
</body>
</html>

什么是z-index属性？
默认情况下所有的元素都有一个默认的z-index属性，取值为0，z-index属性的作用是专门用于控制定位流元素的覆盖关系的。

1、默认情况下定位流的元素会盖住标准流的元素
2、默认情况下定位流的元素后面编写的会盖住前面编写的
3、如果定位流的元素设置了z-index属性，谁的该属性比较大，谁就显示在最外面。

注意点：
1、从父现象
（1）如果两个元素的父元素都没有设置z-index属性，那么谁的的z-index属性比较大谁就显示在上面
（2）如果两个元素的父元素都设置了z-index属性，那么子元素的z-index属性就会失效。

小婵婵不怕鬼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录7/定位流分类/相对定位与绝对定位配合使用案例/焦点图/z-index属性/从父现象

1、相对定位2、绝对定位3、固态定位4、静态定位什么是相对定位？相对定位就是相对于子以前在标准流中的位置来移动。相对定位的注意点：1、相对定位不脱离标准流，会继续在标准流中占用一份空间。2、position: relative;需要配合top、right、left、bottom来使用。3、同一个方向上的定位属性只能使用一个。4、由于相对定位不脱离标准流，所以相对定位中区分行内元素、块级元素和行内款及元素。5、由于相对定位不脱离标准流，并且相对定位的元素会占用标准流的位置，所以相对定位的元素
复制链接

扫一扫