29.前端css小米导航栏设置及定位问题

1.小米最上部导航栏设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*取消前面的点*/
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            overflow: hidden;
            margin: 50px auto;
            background-color: purple;
            /*设置圆角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            
        }
        .nav ul li a{
            width: 160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;

        }
        .nav ul li a:hover{
            background: yellow;
            color: green;
            text-decoration: underline;
        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
        </ul>
    </div>

    
</body>
</html>

2.导航栏定位问题（position）

有3种方式：

相对定位

固定定位

绝对定位

2.1相对定位（relative）

　　相对自己原来的位置进行定位，自己原来的位置作为参考点

　　使用relative下的top,left进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            border: 1px solid green;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            top: 30px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

使用相对定位可以来进行后续表单位置设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .t{
            font-size: 30px;
        }
        .xiaoming{
            position: relative;
            top: 4px;
        }
    </style>
</head>
<body>

    <div>
        <input type="text" class="t">
        <input type="text" class="xiaoming">

    </div>
    
</body>
</html>

2.2绝对定位（absolute）

一般情况下：

1.当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

以父辈盒子作为参考点：

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点

2.如果父亲设置了定位，那么以父亲为参考点。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .wrap{
            width: 400px;
            height: 400px;
            padding: 100px;
            background-color: yellow;
            position: relative;

        }
        
        .container{
            width: 500px;
            height: 500px;
            background-color: green;
            position: relative;
            padding: 20px;
            
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 50px;
            
        }
    </style>
</head>
<body style='height: 2000px;'>
     <div class="wrap">
        <div class="container">
             <div class="box1">
            
              </div>
        </div>
    </div>
</body>
</html>

绝对定位下盒子居中问题：

　　设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中

　　设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 960px;
            height: 49px;
            background-color: purple;
            position: absolute;
            left: 50%;
            margin-left: -480px;

        }
    </style>
</head>
<body>
    
    <div class="nav">
        
    </div>
</body>
</html>

2.3固定定位（fixed）

　　设置固定定位，用top描述，那么是以浏览器的左上角为参考点

　　　　　　　如果用bottom描述，那么是以浏览器的左下角为参考点

固定定位，点击后返回顶部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            bottom: 0;
            right: 50px;
            line-height: 100px;
            text-align: center;
            color: white;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    
    <div class="wrap">
        <p>
            <a href="#">回到顶部</a>

        </p>
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">

    </div>

    <script>
        
        $(function(){
            $('p').click(function(){
                $('html').animate({
                    "scrollTop":0
                },1000)
            })
        })
    </script>
</body>
</html>

3.z-index（用于涂层之间的遮盖）

　　z-index 值表示谁压着谁，数值大的压盖住数值小的

　　只有定位了的元素，才能有z-index（浮动元素无法使用）

　　index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素

　　也具有从父现象

例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            top: 50px;
            z-index: 10;
    
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
            z-index: 8;
            
        }

    </style>
</head>
<body>
    <div class="box1">
        
    </div>
    <div class="box2">
        
    </div>
    <div class="box3">
        
    </div>
    
</body>
</html>

z-index的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        /*设置图片与固定栏间的距离*/
        body{
            padding-top: 40px;
        }
        .nav{
            width: 100%;
            height: 40px;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;  
            /*数值最大，谁也无法压盖住固定栏*/
        }
        .wrap{
            width: 960px;
            overflow: hidden;
            margin: 0px auto;
            background-color: purple;
            border-radius: 5px;

        }
        .wrap ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            
        }
        .wrap ul li a{
            width: 160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;

        }
        .wrap ul li a:hover{
            background: yellow;
            color: green;
            text-decoration: underline;
        }
        
        p{
            position: relative;
        }

    </style>
</head>
<body style="height: 3000px">
    <div class="nav">
        <div class="wrap">
            <ul>
                <li>
                    <a href="#">网站导航</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
            </ul>
        </div>
    </div>

    <img src="./timg.jpg" alt="">
    <img src="./timg.jpg" alt="">
    <img src="./timg.jpg" alt="">
    <img src="./timg.jpg" alt="">
    <p>哈哈哈哈哈哈哈哈</p>
    <img src="./timg.jpg" alt="">
    <img src="./timg.jpg" alt="">
    <img src="./timg.jpg" alt="">

</body>
</html>