CSS关于位置布局

平常布局

关于fixed。

fixed所在的div层，会在整个可视界面定位，不会随滚动条而移动，始终处在你所能看见的界面的相应位置

（相当于你在电脑屏幕上贴了一张纸贴，你的电脑在上下移动，但在电脑屏幕上的纸贴却随电脑而动，在屏幕上贴着的纸还是在那里贴着。）

fixed所在的div层也不会随窗口的变化而移动位置，比如这个div层在窗口右上角，窗口缩小后，这个div层还在窗口右上角，大小也不改变。

 

关于relative。

首先，relative的两个层，呈现上下分布，在浏览窗口界面定位，随滚动条下移，relative和普通层一样，不会在显示。

 

relative层中，（relative层所代表的就是和普通层一样，被分配到相应的位置，即相应的格中，随着显示的元素位置的改变，那个被分配到的格是不会改变的

----比如下方第三层图中，绿和蓝之间的空白层，就是蓝本来被分配到的位置，但蓝元素上移后，格还在，就会显示空白-----无元素）：

想要上移，top必须为负；想要下移，top为正；（所遗留的空白均显示此处无元素）

不动的话，top为0；（可不写）

 

 

 

 

 

 

 

关于absolute。

一般情况下，absolute属性的显示要求div层中套div层。

0.第一层div层有absolute，position后的属性使div元素效果以整个页面为坐标进行定位。

第二层div层没有absolute，元素效果也是以页面为主，从头显示效果。（如下方第一层图片）

 

1.若内层的div层没有absolute属性，外层的div层有absolute属性，外层的div元素效果以整个页面为坐标进行定位。

position下的属性规定的效果以浏览页面为主。（如下方第二层图片）

 

2.若外层的div层没有absolute属性，内层的div层有absolute属性，内层的div元素效果以整个页面为坐标系进行定位。

position下的属性规定的效果以浏览页面为主。（如下方第三层图片）

 

3.外层中position是absolute（其实fixed、relative都行），后面没有position的下属性；内层中position是absolute，后面是position的下属性，

内层div中的元素效果会以外层的div为坐标进行定位。（如下方第四层图片）

 

 

 

 

 

 

转载于:https://www.cnblogs.com/xianshui/p/4437379.html