css中position 定位的兼容性，以及定位的使用及層級的應用

時間 2019-11-20

原文原文鏈接

1、首先咱們來看看定位的兼容性，固然是在IE六、7可是如今大多數公司都已經不考慮了咱們就做爲一個瞭解吧：html

一、在IE67下,子元素有相對定位的話,父級的overflow:hidden包不住子元素
解決辦法: 給父級也加相對定位測試

二、在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的誤差
解決辦法: 父級不要設置雙數。 spa

這裏就不上代碼給你們解釋了，若是小夥伴們想具體瞭解請自行用代碼到IE6\7上面去測試。code

2、如今定位有三種position:relative 相對定位、position:absolute絕對定位、position:fixed固定定位、position:static默認定位、position:inherit繼承定位，如今具體來描述一下這五種定位的特徵：htm

一、position:relative 相對定位相對於自身
1）不影響元素自己特性
2）不使元素脫離文檔流（移動以後原始位置會被保留）
3）若是沒有定位偏移量，對元素自己沒有任何影響
4）提高層級blog

二、position:absolute 絕對定位相對於父級(若是父不設置relative，那麼子會向上尋找祖先元素，看是否設置relative。若是有則相對於設置的relative來進行定位，若是沒有，那麼就相對於body窗口來定位。)
1）使元素脫離文檔流
2）使內嵌元素支持寬高
3）塊屬性標籤內容撐開寬高
4）若是有定位父級相對於父級發生偏移，沒有父級相對於document發生偏移
5）相對定位是配合絕對定位使用的
6）提高層級繼承

三、position:fixed；固定定位
與絕對定位的特性基本一致，的差異是始終相對整個文檔進行定位；
問題：IE6不支持固定定位；

四、static(默認值) ；utf-8

五、inherit(從父元素繼承定位屬性的值);文檔

如下代碼比較簡單給你們展現一下前三種定位效果：it

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<!--            
一、position:relative 相對定位    相對於自身 
    1）不影響元素自己特性
    2）不使元素脫離文檔流 （移動以後原始位置會被保留）
    3）若是沒有定位偏移量，對元素自己沒有任何影響
    4）提高層級

二、position:absolute 絕對定位    相對於父級(若是父不設置relative，那麼子會向上尋找祖先元素，看是否設置relative。若是有則相對於設置的relative來進行定位，若是沒有，那麼就相對於body窗口來定位。)
    1）使元素脫離文檔流
    2）使內嵌元素支持寬高
    3）塊屬性標籤內容撐開寬高
    4）若是有定位父級相對於父級發生偏移，沒有父級相對於document發生偏移
    5）相對定位是配合絕對定位使用的
    6）提高層級

三、position:fixed； 固定定位
    與絕對定位的特性基本一致，的差異是始終相對整個文檔進行定位；
    問題：IE6不支持固定定位；
    
四、static(默認值) | inherit(從父元素繼承定位屬性的值);

五、position:absolute;和position:fixed; 絕對定位元素子級的浮動能夠不用寫清浮動方法；                
        -->
        <style>
            *{margin: 0;padding: 0;}
            #relative,#abselute{
                position: relative;                 
                width: 500px;                
                border: 1px solid #000000;
                text-align: center;
                
            }
            #relative{
                left: 500px;
                top:20px;
                height: 20px;
                color: red;}
            #abselute{
                left: 500px;
                top:100px;
                height: 300px;
                
            }

            #abselute div{
                position: absolute;
                top: 100px;
                left: 50px;
                width: 100px;
                height: 100px;
                font-size: 48px;
                text-align: center;
                color: #fff;
            }
            #fixed{
                width: 50px;
                height: 200px;
                position: fixed;
                right: 0;
                bottom: 0;
                background-color: red;
            }
        </style>
    </head>
    <body style="height: 2000px;">
        <div id="relative">position: relative; </div>
        <div id="abselute">position: abselute; 
            <div style="background: red;">1</div>
        </div>
        <div id="fixed">fixed</div>
    </body>
</html>

3、層級的使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<!--
定位元素默認後者層級高於前者,建議在兄弟標籤之間使用;
z-index:number;  定位層級(默認0)
    
-->
        <style>
            *{margin: 0;padding: 0;}
            #abselute{
                position: relative;
                top: 20px;
                left: 100px;
                width: 500px;
                height: 300px;
                border: 1px solid #000;
            }
            #abselute div{
                font-size: 48px;
                text-align: center;
                color: #fff;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="abselute">
            <div style="background: red;z-index: 1;">1</div>//這裏使用了層級，咱們就會優先看到紅色背景的色塊
            <div style="background: yellow;">2</div>
            <div style="background: cyan;">3</div>
        </div>
    </body>
</html>