純CSS實現左側伸縮固定和頭部固定佈局 之 css佈局定位再學習

前言：

最近寫的項目需要，左側和頂部固定導航，且左邊和伸縮，用js很容易實現。但是我就嘗試只用css看能不能實現。

結果實現了，在此，感謝項目組的隊友給我的思路。

代碼可能直接運行不全，此處只寫思路。

左側導航爲js寫的點擊切換class，左側寬度變小變大。

.showSider {
	width: 150px;
}
.hideSider {
	width: 65px;
}

HTML:

<div id="framerPar">
    <div id="framerParCon">
        <!-- 左邊側導航 -->
        <div id="framerLeft showSider">
            <ul>
                <li>上導航</li>
            </ul>
        </div>
        <!-- 右邊容器 -->
        <div id="framerRight">
            <!-- 右邊上導航 -->
            <nav>
                <ul>
                    <li>上導航</li>
                </ul>
            </nav>
            <div id="framerRightBot">
                內容區域，此處滾動
            </div>
        </div>
    </div>
</div>

CSS:

 /*最父層，可無此項*/
    #framerPar {
        padding-left:0; 
        height: 100%; 
        width: 100%;
    }
    /*框架容器*/
    #framerParCon {
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display:-webkit-flex;
        display: -ms-flexbox;
        display:flex;

    }
    /*左側容器導航*/
    #framerLeft {
        height: 100%; 
        background-color: #197DE7;
        overflow: auto;
        overflow-x: hidden;
        max-width: 200px;
        min-width: 50px;
    }
    /*右側容器*/
    #framerRight {
        padding:0;
        position: relative;
        overflow: auto;
        height: 100%;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    /*右側容器上導航*/
    #framerRightTop {
        width: 100%;
        position: absolute;
        top: 0;
        /*left: 0;*//*重點不用設置，會自動隨着左邊寬度變小而改變，爲默認值 auto */
        z-index: 10;
    }
    /*右側容器下內容區域*/
    #framerRightBot {
        width: 100%;
        height: 100%;
        padding-top: 60px;
        overflow: auto;
        /*margin-top: 50px;*/
    }

其實重點就兩個點：

1、flex佈局，左邊固定，右邊會自適應。

2、當absolute或者fixed定位，不設置固定left或者top，會自動跟隨第一個父元素的非靜態定位 ，即left/top的默認 auto 定位。（css的默認值真的很重要。。）

TIPS:

還有一個有意思的，假如父層加上 transform:translate。則子元素fixed相對於，transform:translate的元素。

其實就是transform會強制改變文檔層級（可能說的不準確，歡迎大神補充和詳解的鏈接）。所以fixed不一定相對於瀏覽器哦。