九 . css系列之定位、z-index及應用

原創 Stavin Li 2018-08-23 06:53
（一）定位的含義
通過定位可以讓一個元素位於頁面的任意位置，定位的思想認爲所有元素都是“框”，框分爲兩個：塊塊、行內框。定位的分類：靜態定位、相對定位、絕對定位、固定定位
（二）定位分類
定位的分類：靜態定位、相對定位、絕對定位、固定定位
1.position:static定位的默認值，元素沒有任何的附加效果
2.position:relative相對定位
a.相對定位的參照物是自身原有位置
b.如果一個元素設置了position：relative，但是沒有告訴它位移的方向和尺度，它將保持原有位置不變
c.如果要向右移動可以設置left，如果要向下移動可以設置top,如果要向左移動，可以設置right，如果要向上移動可以設置bottom
d.一個元素做了相對定位其遠原有位置並不丟失，換句話說該元素仍處於標準文檔流中
3.position:absolute，絕對定位的參照物是具有定位屬性的祖先元素（離它最近的祖先元素）
a.元素有祖先元素，但是祖先元素沒有定位
b.元素有祖先元素，且祖先元素有定位
注意：
    (a.一個元素如果設置了絕對定位，但是沒有設置top/bottom/left/right四個屬性，那麼這個元位置保持不變，但是它會從標準文檔流中脫離，其在標準文檔流中的原有位置丟失
    (b.可以設置top /bottom/left /right四個屬性
    (c.一個元素如果做絕對定位，那麼首先要看它的祖先元素有沒有定位，如果祖先元素沒有定位，該元素的位移參照是body
，如果它祖先元素有定位，那麼它的位移參照是祖先元素
    (d.一個元素左絕對定位時，如果它的祖先元素都有定位，那麼它的參照是離它最近的那個祖先元素
4.position:fixed，位移參照始終是body無論祖先元素有沒有定位
   多應用於頁面中的廣告圖片
（三）z-index:調節元素的堆疊次序，屬性值就是數值，沒有單位 ,值越大元素越靠上
元素默認的堆疊順序是受HTML標籤排列順序決定，寫在後面的在上面顯示，寫在前面的在下面顯示
z-index屬性的前提是該元素必須具有定位
（四）應用
1.淘寶目錄
<head>
    <meta charset="UTF-8">
    <title>定義列表的應用1</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        body{
            width: 700px;
            margin: 0 auto;
        }
        h3{
            font-size: 14px;
            background: yellowgreen;
            height: 30px;
            width: 130px;
            line-height: 30px;
            color: #fff;
            border-radius: 5px 5px 0 0;
            padding-left: 5px;
        }
        div{
            width: 400px;
            height: 200px;
            border: 1px solid yellowgreen;
            font-size: 12px;
            padding: 10px 0 0 20px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        dt a{
            margin-right: 15px;
        }
        dd a{
            margin-right: 10px;
        }
        dd{
            margin: 10px 0 30px 0;
        }
    </style>
</head>
<body>
    <h3>所有類目</h3>
    <div>
        <dl>
            <dt>
                <a href="#">二手傢俱</a>
                <a href="#">傢俱百貨</a>
            </dt>
            <dd>
                <a href="#">牀</a> 
                <a href="#">櫃子</a> 
                <a href="#">桌椅</a> 
                <a href="#">沙發</a> 
                <a href="#">沙發</a> 
                <a href="#">沙發</a> 
            </dd>
            <dt>
                <a href="#">二手傢俱</a>
                <a href="#">傢俱百貨</a>
            </dt>
            <dd>
                <a href="#">牀</a> 
                <a href="#">櫃子</a> 
                <a href="#">桌椅</a> 
                <a href="#">沙發</a> 
                <a href="#">沙發</a> 
                <a href="#">沙發</a> 
                <a href="#">沙發</a> 
            </dd>
        </dl>
    </div>
</body>
2.新聞目錄
<head>
    <meta charset="UTF-8">
    <title>定義列表的應用2</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 100%;
            margin: 0 auto;
            font-size: 12px;
        }
        dt{
            font-weight: bold;
        }
        dt,dd{
            float: left;
            margin-right: 20px;
        }
        dl{
            width: 200px;
            border-right: 1px dashed #ccc;
            float: left;
            margin-right: 20px;
        }
        body dl:last-of-type{
            border: none;
        }
​
    </style>
</head>
<body>
    <div>
        <dl>
            <dt>新聞</dt>
            <dd>軍事</dd>
            <dd>評論</dd>
            <dd>圖片</dd>
            <dt>體育</dt>
            <dd>購彩</dd>
            <dd>NBA</dd>
            <dd>中超片</dd>
            <dt>娛樂</dt>
            <dd>電影</dd>
            <dd>電視</dd>
            <dd>音樂</dd>
        </dl>
        <dl>
            <dt>新聞</dt>
            <dd>軍事</dd>
            <dd>評論</dd>
            <dd>圖片</dd>
            <dt>體育</dt>
            <dd>購彩</dd>
            <dd>NBA</dd>
            <dd>中超片</dd>
            <dt>娛樂</dt>
            <dd>電影</dd>
            <dd>電視</dd>
            <dd>音樂</dd>
        </dl>
        <dl>
            <dt>新聞</dt>
            <dd>軍事</dd>
            <dd>評論</dd>
            <dd>圖片</dd>
            <dt>體育</dt>
            <dd>購彩</dd>
            <dd>NBA</dd>
            <dd>中超片</dd>
            <dt>娛樂</dt>
            <dd>電影</dd>
            <dd>電視</dd>
            <dd>音樂</dd>
        </dl>
        <dl>
            <dt>新聞</dt>
            <dd>軍事</dd>
            <dd>評論</dd>
            <dd>圖片</dd>
            <dt>體育</dt>
            <dd>購彩</dd>
            <dd>NBA</dd>
            <dd>中超片</dd>
            <dt>娛樂</dt>
            <dd>電影</dd>
            <dd>電視</dd>
            <dd>音樂</dd>
        </dl>
        <dl>
            <dt>新聞</dt>
            <dd>軍事</dd>
            <dd>評論</dd>
            <dd>圖片</dd>
            <dt>體育</dt>
            <dd>購彩</dd>
            <dd>NBA</dd>
            <dd>中超片</dd>
            <dt>娛樂</dt>
            <dd>電影</dd>
            <dd>電視</dd>
            <dd>音樂</dd>
        </dl>
        <dl>
            <dt>新聞</dt>
            <dd>軍事</dd>
            <dd>評論</dd>
            <dd>圖片</dd>
            <dt>體育</dt>
            <dd>購彩</dd>
            <dd>NBA</dd>
            <dd>中超片</dd>
            <dt>娛樂</dt>
            <dd>電影</dd>
            <dd>電視</dd>
            <dd>音樂</dd>
        </dl>
    </div>
</body>
3.手風琴菜單
<head>
    <meta charset="UTF-8">
    <title>手風琴菜單</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        a{
            text-decoration: none;
            color: #000;
            display: block;
        }
        ul{
            width: 500px;
            margin: 0 auto;
            list-style: none;
        }
        li{
            float: left;
        }
​
        li>a{
            width: 28px;
            height: 90px;
            background: green;
            text-align: center;
​
        }
​
        li>a,div{
            float: left;
        }
​
        div{
            background: pink;
            width: 90px;
            height: 90px;
            font-size: 14px;
            padding: 10px 0 0 10px;
            display: none;
        }
        li:hover div{
            display: block;
        }
        li div a:hover{
            color: #f00;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">吉林省</a>
            <div>
                <a href="#">長春市</a>
                <a href="#">吉林市</a>
                <a href="#">四平市</a>
            </div>
        </li>
        <li>
            <a href="#">遼寧省</a>
            <div>
                <a href="#">瀋陽市</a>
                <a href="#">盤錦市</a>
                <a href="#">大連市</a>
            </div>
        </li>
        <li>
            <a href="#">黑龍江省</a>
            <div>
                <a href="#">齊齊哈爾市</a>
                <a href="#">哈爾濱市</a>
                <a href="#">黑河市</a>
            </div>
        </li>
    </ul>
</body>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Textarea /n 內容展示時實現換行

<div class="content">11111111/n2222222/n3333333<div> 添加樣式如下： .content{ white-space: pre-line; }

Stavin Li 2020-06-19 07:56:46

十二 . css系列之less語法

Stavin Li 2018-08-23 06:53:17

十一 . css系列之統籌、使用規範及重置樣式

Stavin Li 2018-08-23 06:53:17

十 . css系列之兼容問題

Stavin Li 2018-08-23 06:53:16

六 . css系列之列表、背景、表格屬性

Stavin Li 2018-08-23 06:53:16

五 . css系列之文本段落屬性及應用

Stavin Li 2018-08-23 06:53:15

八 . css系列之浮動及應用

Stavin Li 2018-08-23 06:53:15

七 . css系列之盒子模型

Stavin Li 2018-08-23 06:53:15

四 . css系列之選擇器詳解及權重

Stavin Li 2018-08-23 06:53:04