web布局——说清楚fixed布局

极限省流

想要fixed做导航页面：指定清楚top、left、right、bottom，没指定清楚布局位置就会采用默认的方式：

0）父元素的padding：fixed元素相对位移

1）同级元素是fixed元素：覆盖

2）同级元素有非fixed元素-》看它们的margin

使用总结：还是用top、left、right直接指定好

准备

准备好一个html文件和一个css文件

2）在css文件中写出fixed元素和非fixed元素（一般元素）做区分

.fixed_item{
	position: fixed;
	background-color: lightgreen;
}

.normal_item{
	background: lightblue;
	margin: 0px;
}

 3）为了看出fixed的效果，我们写一个obey样式，设定它的min-height，以便页面够长可以“测试滚动”

.obey{
	background: lightblue;
	margin: 0px;
	min-height: 500px;
}

一、fixed的固定效果

fixed脱离文档流——就是相对整个窗口浮动

fixed使得元素一直保持在屏幕的某一位置，不会随着滚轴在页面上的位移而改变

实例：

加两个占位元素以后，页面就足够长可以滚动了，滚动的时候会发现fixed元素一直在左侧

	
	


	
	
		首个fixed元素
	
	占位元素
	占位元素
	

二、fixed布局

接下来以几个实例说明

1、之前的非flex元素

包括父元素和同级元素的height

htnl代码如下：

    
        空一行
        空一行
        fixed之前的pre元素
    
 首个fixed元素
 紧接着的一个fixed元素
 占位元素
 占位元素
 
效果显示：
①可以看出来“第一个fixed元素”已经看不到了，被”紧接着的一个fixed元素”遮挡了
 ②画面里仅有的一个fixed元素在
打完之后才出现，所以pre实体内容的高度会影响fixed元素的布局
2、margin
验证fixed只受其之前元素（包含父元素）和同级元素margin的影响
1）父元素的margin
 ①向html中加入一个fixed_item，发现fixed_item离左上角还有些距离



	
	


	
	
		首个fixed元素
	


②将所有的margin清零
body{
	margin: 0px;
}
刷新得到效果：
结论：故fixed元素受其父元素的margin的影响
2）同级元素的margin
现在我们在fixed_item元素后增加一个元素（类别认定为normal_item_wm，with mragin的意思）：

	
	
		首个fixed元素
	
	
	同级元素，带margin
	占位元素
	占位元素

定制样式：为了突出显示，定margin为100px
.normal_item_wm{
	background: lightyellow;
	margin: 100px;
}
刷新结果显示：
结论：fixed元素的位置再一次发生了改变，说明同级元素的margin依然会影响到fixed的布局
3）子元素的margin
html中的代码是：

    
        首个fixed元素
        
            子元素，带margin
    
    占位元素
    占位元素
刷新效果如下：
补充：子元素也跟着fixed，脱离文档流
结论：fixed_item的位置不会受其自己的子元素的margin的影响
4）由2）和3）可以看出来margin是作用在直接的父子元素之间的
3、padding
先说结论：只有父元素的padding才会影响fixed_item的布局
1）父元素的padding
html代码：

    
        首个fixed元素
       

    占位元素
    占位元素

css代码：
body{
	margin: 0px;
	padding: 100px;
}
显示效果：
 
2）同级元素的padding

    
        首个fixed元素
    
    
    	带padding的普通元素
    

    占位元素
    占位元素
记得将body还原成默认css
/*body{
	margin: 0px;
	padding: 100px;
}*/
.fixed_item{
	position: fixed;
	background-color: lightgreen;
	margin: 0px;

}

.normal_item{
	background: lightblue;
	margin: 0px;
	padding: 100px;
}
效果如下图 
                                ​​​​​​​        ​​​​​​​        
4、直接指定位置
上述介绍中，可以看到默认情况下的fixed元素位置有太多的影响因素，因此我们需要一种直接指定位置的方式——[top,bottom,left,right]（如果没有指定清楚某一方位，就会采用二的1-3默认布局）
html文件：

    
        空一行
        空一行
        fixed之前的pre元素
    
 首个fixed元素
 占位元素
 占位元素
css文件
.fixed_item{
	position: fixed;
	background-color: lightgreen;
	margin: 0px;
	top:10px;
	left: 100px;
	right: 100px;

}


.obey{
	background: lightblue;
	margin: 0px;
	min-height: 500px;
}
三、fixed应该怎么用？
fixed可以使元素相对视角窗口固定，个人觉得非常适合用来做导航栏、侧边栏
其实在2.4的介绍中已经给出了fixed的基本用法，只是还存在问题：fixed浮空遮挡了pre的部分内容
可以给fixed对应位置“垫一个底板”，由于fixed已经直接指定了位置，所以不担心它会被底板影响布局
html中：

	
    CSDN水平导航
	
    
    	pre开始
    	pre1
    	pre2
    	pre中间
    	pre3
    	pre结束

    
 占位元素1
 占位元素2
css文件中
.navibg{
	height: 48px;
}
.navi{
	/*需求：占满屏幕*/
	height: 48px;
	background-color: lightgreen;
	position: fixed;
	left: 2px;
	right: 2px;
}

.obey{
	min-height: 500px;
}
效果显示：