zoukankan      html  css  js  c++  java
  • 前端开发之CSS篇四

    一、相对定位

    二、绝对定位

    三、固定定位

    四、z-index

    前言

      定位有三种:1、相对定位  2、绝对定位  3、固定定位

      这三种定位,每种都暗藏玄机,所以要每个单独剖析。

    1️⃣   相对定位

      1、三大特性  

    1、不脱标 (遵循标准流)
    2、形影分离 
    3、老家留坑,占着茅坑不拉屎,很恶心
    
    所以说相对定位没什么太大的用处,还影响页面布局。不建议使用相对定位来做压盖效果

      2、好处 

    ① 微调元素信息 
    ② 做绝对定位的参考(父相子地)

      3、示例:

     <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>相对定位</title>
            <style type="text/css">
                *{
                    padding:0;
                    margin:0;
                }
            .box1{
                width:300px;
                height: 50px;
                background-color: dodgerblue;
                /*如果仅对当前元素设置相对定位,那么与标准流下的盒子没有什么区别*/
                /*position: relative;*/
                /*!*设置相对定位,我们可以使用四个方向的属性 top left right bottom*/
                /*相对定位:相对于自己原本的本身定位 top:30px;*/
                /*那么盒子相对原来的位置向下移动30px*!*/
                /*top:30px;*/
                /*left:30px;*/
            }
            .box2{
                width:300px;
                height: 200px;
                margin:100px;
            }
            .user{
                font-size: 20px;
            }
    
            .btn{
                position: relative;
                top: 1px;
                left:-5px;
            }
            </style>
        </head>
        <body>
            <div class="box1"></div>
        
            <div class="box2">
                <input type="text" name="username" class="user">
                <input type="button" name="" value="点我" class="btn">
            </div>
            <div class="box3"></div>
        </body>
        </html>
    View Code

    2️⃣  绝对定位

      1、特性: 

    ① 脱标(脱离标准流),
    ② 做遮盖效果,
    ③ 设置绝对定位后,不区分行内元素和块状元素,都能设置宽高(相比设display:block,设置绝对定位会脱标)

       示例:

      <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>绝对定位</title>
            <style type="text/css">
                *{
                    padding:0;
                    margin:0;
                }
    
            .box3{
                width:300px;
                height:200px;
                background-color: #5cb85c;
                position: absolute; /*遮盖下一个盒子*/
            }
            .box4{
                width:300px;
                height:200px;
                background-color: #b3d7ff;
                /*position: absolute; !*遮盖下一个盒子*!*/
            }
            .box5{
                width:300px;
                height:200px;
                background-color:indianred;
            }
            span{
                width:200px;
                height:100px;
                background-color: #7d74ff;
                position: absolute; /*相当于display:block,将行内元素转成了块状元素*/
            }
            </style>
        </head>
        <body>
    
            <div class="box3"></div>
            <div class="box4"></div>
            <div class="box5"></div>
            <span>你好,明天</span>
        </body>
        </html>
    View Code

     2、绝对定位参考点

      设置属性top时,定位点在页面左上角,不是浏览器页面,一定要区分
      设置属性为bottom时,定位点在页面左下,页面滑动缩放时也能随之滑动缩放

      示例: 

     <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>绝对定位参考点</title>
            <style type="text/css">
                *{
                    padding:0;
                    margin:0;
                }
            body{
                width:1000px;
                height: 1000px;
                border: 2px solid yellowgreen;
            }
            .box6{
                width:300px;
                height:200px;
                background-color: #b3d7ff;
                position: absolute;
                /*top:100px; !*设置属性top时,定位点在页面左上角,不是浏览器页面,一定要区分*!*/
                left: 2px;
                bottom: 100px;/*设置属性为bottom时,定位点在页面左下,页面滑动缩放时也能随之滑动缩放*/
            }
    
            </style>
        </head>
        <body>
            <div class="box6"></div>
        </body>
        </html>
    View Code

      绝对定位以父辈元素作为参考点

        分三种:父相子绝,父绝子绝,父固子绝,都是以父辈元素为参考点。

        注意:

    “父绝子绝”(即父辈设为绝对定位,子辈设为绝对定位),没有实战意义,做站的时候不会出现父绝子绝。
                因为绝对定位脱离标准流,影响页面的布局。与之相反,“父相子绝”(即父辈设为相对定位,子辈设为绝对定位),
                因为父辈设为了相对定位,不脱离标准流,子元素设置绝对定位,仅仅是在当前父辈元素内调整位置信息。

        “父相子绝”主要有两种情况:

        ①爷爷设置相对定位,父亲没有设置定位,儿子设置绝对定位,那么以爷爷的左顶点为参考点来调整位置。

        ②爷爷设置相对定位,父亲设置相对定位,儿子设置绝对定位,那么以父亲的左顶点为参考点来调整位置。

        总而言之就是:

            父元素设置相对定位,子元素设置绝对定位,此时子元素的参考点为父元素的左顶点。
       情况①示例如下:   
     <!DOCTYPE html>
                <html lang="en">
                <head>
                <meta charset="UTF-8">
                <title>爷爷设置相对定位,父亲没有设置定位,儿子设置绝对定位,那么以爷爷的左顶点为参考点来调整位置(父相自绝)</title>
                <style type="text/css">
    
                    .box2{
                        width:300px;
                        height:200px;
                        border: 2px solid pink;
                        margin: 100px;
                        position: relative;
                        padding: 100px;
                    }
                    .box2-son{
                        width: 200px;
                        height: 150px;
                        background-color: #b2e567;
    
                    }
                    span{
                        width:100px;
                        height: 80px;
                        background-color: #428bca;
                        position: absolute;
                        top:50px;
                        left:50px;
                    }
                        </style>
                </head>
                <body>
                    <div class="box2">
                        <div class="box2-son">
                            <span></span>
                        </div>
                    </div>
                </body>
                </html>
    View Code

        情况②示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位参考点-以父辈元素作为参考点,父辈相对定位,子辈绝对定位(父相自绝)</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
     /*爷爷设置相对定位,父亲设置相对定位,儿子设置绝对定位,那么以父亲的左顶点为参考点来调整位置*/
            *{
                padding:0;
                margin:0;
            }
             .box2{
            width:300px;
            height:200px;
            border: 2px solid pink;
            margin: 100px;
            position: relative;
            padding: 100px;
        }
        .box2-son{
            width: 200px;
            height: 150px;
            background-color: #b2e567;
            position: relative;
        }
        span{
            width:100px;
            height: 80px;
            background-color: #428bca;
            position: absolute;
            top:40px;
            left:50px;
            }
     </style>
    </head>
    <body>
    
        <div class="box2">
            <div class="box2-son">
                <span></span>
            </div>
        </div>
    </body>
    </html>
    View Code

        总结成一种就是: 

    <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
    /*父元素设置相对定位,子元素设置绝对定位,此时子元素的参考点为父元素的左顶点*/
        .box1{
            width:400px;
            height: 300px;
            border: 2px solid palegreen;
            margin: 100px;
            /*父元素设置相对定位*/
            position: relative;
        }
        p{
            width:200px;
            height: 100px;
            background-color:indianred;
            /*子元素设置绝对定位*/
            position: absolute;
            top: 10px;
            left: 20px;
        }
    
        </style>

      3、绝对定位的盒子无视父辈的padding 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位参考点-以父辈元素作为参考点,父辈相对定位,子辈绝对定位(父相自绝)</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
         *{
                    padding:0;
                    margin:0;
                }
    
            .box{
                width:200px;
                height:200px;
                border: 2px solid pink;
                margin: 100px;
                position: relative;
                padding: 30px;
            }
            .box-son{
                width: 100px;
                height: 100px;
                background-color: #b2e567;
                position:absolute;
                top:0;
                left:0;
            }
         </style>
    </head>
    <body>
     <div class="box">
            <div class="box-son">
            </div>
        </div>
    </body>
    </html>
    View Code

      4、绝对定位盒子居中

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>绝对定位参考点-以父辈元素作为参考点,父辈相对定位,子辈绝对定位(父相自绝)</title>
            <style type="text/css">
                *{
                    padding:0;
                    margin:0;
                }
        /*绝对定位盒子居中*/
                .box{
                    width:100%;
                    height: 50px;
                    background-color: #7d74ff;
    
                }
                .box-son{
                    width: 1000px;
                    height:50px;
                    background-color: #b3d7ff;
                    /*设置绝对定位,使盒子水平居中,必须要写下面三句*/
                    position: absolute;
                    left:50%;
                    margin-left: -500px; /*数值取盒子宽度的一半(取负值,表示向左移动)*/
                }
    
            </style>
        </head>
        <body>
      
            <div class="box">
                <div class="box-son">
                </div>
            </div>
        </body>
        </html>

    3️⃣  固定定位

      1、何谓固定定位?

        固定定位即固定当前的元素不会随着页面滚动而滚动。

      2、特性:

    1、脱标;
    2、提升层级;
    3、固定不变,不会随着页面滚动而滚动。

      3、参考点:

    设置固定定位,用top描述时,那么是以浏览器的左上角为参考点,如果用bottom描述,那么以浏览器的左下角为参考点

      4、作用:

    1、返回顶部栏
    2、固定导航栏 
    3、小广告

      5、示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            /* *{}、ul{}和a{}用于页面初始化设置 */
            *{
                padding:0;
                margin:0;
            }
            ul{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            body{
                /*给body设置导航栏的高度,使下方的图片能够完全显示出来*/
                padding-top:50px;
            }
            p{
                width:200px;
                height:180px;
                background-image: url("./images/lufei.jpg");
                background-repeat: no-repeat;
                border-radius: 5px;
                position: fixed;
                top:100px;
                /*bottom: 100px;*/
                left:80px;
            }      
       /* 固定导航栏 */
            .wrap{
                width:100%;
                height:50px;
                background-color: #b3d7ff;
                position:fixed;
                top:0;
                left:0;
            }
            .wrap .nav{
                width:1000px;
                height:50px;
                margin:0 auto;
                background-color:yellowgreen;
            }
            .wrap .nav ul li{
                width:200px;
                height:50px;
                float:left;
                text-align: center;
            }
            .wrap .nav ul li a{
                width: 200px;
                height:50px;
                font-size: 16px;
                font-family: "Microsoft YaHei UI";
                line-height: 50px;
                background-color: #7d74ff;
                display: inline-block;
            }
            .wrap .nav ul li a:hover{
                font-size: 20px;
                color:mediumspringgreen;
                background-color: #5bc0de;
            }
    
    
            /*返回顶部栏*/
            .return_top{
                width:40px;
                height: 60px;
                background-color: #428bca;
                font-size: 18px;
                color: white;
                position: fixed;
                right: 60px;
                bottom: 60px;
                padding: 10px;
                border-radius: 6px;
            }
            .return_top a{
                text-decoration: none;
                color:yellowgreen;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="nav">
                <ul>
                    <li><a href="">目录1</a></li>
                    <li><a href="">目录2</a></li>
                    <li><a href="">目录3</a></li>
                    <li><a href="">目录4</a></li>
                    <li><a href="">目录5</a></li>
    
                </ul>
            </div>
        </div>
        <div>
            <img src="images/pic1.jpg" alt="">
            <img src="images/pic1.jpg" alt="">
            <img src="images/pic1.jpg" alt="">
            <img src="images/pic1.jpg" alt="">
            <img src="images/pic1.jpg" alt="">
            <img src="images/pic1.jpg" alt="">
             <p></p>
        </div>
        <div class="return_top">
            <a href="#">返回顶部</a>
        </div>
    </body>
    </html>

    4️⃣  z-index 

     1、z-index值仅表示谁压着谁。数值大的压盖数值小的。
     2、只有定位了的元素,才能有z-index,也就是说,不管相对定位、绝对定位还是固定定位,
            都可以使用z-index,而浮动元素不能使用z-index.
     3、z-indexz值没有单位,就是一个正整数,默认的z-index值为0.
     4、如果元素都没有z-index值,或者z-index的值一样,那么谁写在HTML之后,
            谁在上面压着别人,定位了的元素,永远压住没有定位的元素。
     5、从父现象:父亲怂了,儿子再牛逼也没有。
      <title>z-index实例</title>
            <style type="text/css">
                *{
                    padding: 0;
                    margin:0;
                }
                .father1{
                    width: 300px;
                    height: 200px;
                    background-color: #b2e567;
                    position: relative;
                    z-index: 120;
                }
                .son1{
                    width:110px;
                    height: 100px;
                    background-color: #b3d7ff;
                    position: absolute;
                    top:600px;
                    left: 360px;
                    z-index: 30;
                }
                .father2{
                    width:300px;
                    height: 200px;
                    background-color: #7d74ff;
                    position: relative;
                    z-index: 100;
                }
                .son2{
                    width: 120px;
                    height:120px;
                    background-color: burlywood;
                    position: absolute;
                    top:360px;
                    left:360px;
                    z-index:20;
                }
            </style>
        </head>
        <body>
            <div class="father1">
                <div class="son1"></div>
            </div>
            <div class="father2">
                <div class="son2"></div>
            </div>
        </body>
        </html>
  • 相关阅读:
    Tomcat安装和使用
    mysql5.7.18安装配置
    Memcached安装与使用
    Redis
    nginx的安装与使用
    python操作mysql
    Paramiko模块
    协程与异步IO
    Queue与生产者消费者模型
    C# 生成验证码 方法二
  • 原文地址:https://www.cnblogs.com/schut/p/9296362.html
Copyright © 2011-2022 走看看