纯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不一定相对于浏览器哦。