HTML連載62-固定定位練習、z-index屬性

時間 2020-01-11

標籤 html 連載固定定位練習 index 屬性欄目 HTML 简体版

原文原文鏈接

1、固定定位應用場景html

1.練習git

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D158_ExerciseOfLocation</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        .nav{

            width: 100%;

            height: 45px;

            background-color: red;

            background:url("image/play_tennis.jpg");

             position:fixed;/*複習了固定定位，這個導航條就會固定到瀏覽器中不會隨網頁滾動而滾動了，兵器也脫脫離的標準流*/

        }

        .content{

            width: 100%;

            height: 2500px;

            background-color: yellow;

            background:url("image/laptop.jpg");

        }

        .backup{

            width: 50px;

            /*height: 50px;*/

            background-color: red;

            position:fixed;

            right: 10px;

            bottom:10px;

            text-align: center;

            text-decoration: none;/*去掉下面的線*/

            line-height: 50px;/*行高能夠撐起盒子的高度*/

        }

</style>

</head>

<body>

<div class="nav"></div>

<div class="content"></div>

<div class="backup"><a href="#">返回</a></div>

</body>

</html>

注意：IE6不支持固定定位，谷歌瀏覽器支持。github

2、定位流-z-index屬性瀏覽器

1.什麼是z-index屬性？微信

默認狀況下全部的元素都一個默認的z-index屬性，取值爲0，z-index屬性的做用是準們用於控制定位流元素的覆蓋關係的學習

2.默認狀況下定位流的元素會蓋住標準流的元素。大數據

3.默認狀況下定位流的元素後面編寫的會蓋住前面編寫的。ui

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D159_z-indexAttribute</title>

    <style>

        *{

            padding:0px;

            margin:0px;

        }

        div{

            width: 100px;

            height: 100px;

        }

        .box1{

            background-color: red;

            position:fixed;

        }

        .box2{

            background-color: yellow;

            /*position:relative;*/

        }

        .box3{

            background-color: blue;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

釋義：紅色的塊蓋住了黃色的塊，緣由符合第2條url

        .box2{

            background-color: yellow;

            position:relative;

        }

釋義：黃色的塊蓋住了紅色的塊，緣由符合第三條spa

4.使用z-index屬性來規定這個標籤的優先級。若是定位流的元素設置了z-index屬性，那麼誰的z-index屬性比較大，誰就顯示在上面。

        .box1{

            background-color: red;

            position:fixed;

            z-index: 1;

        }

        .box2{

            background-color: yellow;

            position:relative;

        }

釋義：這樣就打破那個規則了，能夠自動義進行排序。

注意點：

從父元素入手：

（1）若是兩個元素的父元素都沒有設置z-index，那麼誰的z-index屬性比較大的誰就顯示在上面；

（2）若是兩個元素的父元素都設置了z-index屬性，那麼誰的父元素z-index屬性比較大，那麼誰就顯示在上面。子元素的z-index就失效了。

3、源碼：

D158_ExerciseOfLocation.html

D159_z-indexAttribute.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D158_ExerciseOfLocation.html

https://github.com/ruigege66/HTML_learning/blob/master/D159_z-indexAttribute.html

2.CSDN：https://blog.csdn.net/weixin_44630050