CSS-定位布局

1、定位的作用

普通文档流中块元素垂直排列;行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示。 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置;自由的在某个盒子内移动位置或者固定在屏幕中的某个位置;。

2、定位的实现

使用定位需要指定一个元素在文档中的定位模式;配合设置【边偏移量】决定元素最终的显示及位置。

定位模式通过position属性来设置;以下为常用四种定位模式静态定位;相对对定位;绝对定位;固定定位。

边偏移定位元素的位置;使用top、right、bottom和left来描述。

通常水平位置通过left或right控制;垂直位置通过top或bottom控制。

位置属性

left;设置距离包含块左侧的距离

right;设置距离包含块右侧的距离

top;设置距离包含块顶部的距离

bottom;设置距离包含块底部的距离

取值

长度值;px/em等

百分比;相对于包含块计算

auto 默认值

允许使用负值

3、定位模式详解

 相对定位

postion:relative;

相对于元素在正常的文档流中的位置移动它;把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变。

基础特性

不脱离文档流

提升元素层级

不定义偏移量时对元素基本没有影响

应用场景

通常作为定位父级配合绝对定位使用

绝对定位

postion:absolute;

没有定位父级时相对于HTML进行定位;有定位父级时相对于最近的定位父级进行定位。

基础特性

脱离文档流

提升元素层级

应用场景

通常配合绝对定位使用;父相子绝;结合实际案例;如焦点图中的分页;翻页;视频网站中的 vip标签等。

固定定位

postion:fixed;

元素的位置相对于浏览器窗口是固定位置;即使窗口是滚动的它也不会移动。

基础特性总结

脱离文档流

提升元素层级

 应用场景

相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏。

静态定位

postion:static;

表示“将元素放在文档布局流的默认位置;HTML 元素的默认值;即没有定位;遵循正常的文档流对象。

 基础特性总结

静态定位的元素不会受到 top; bottom;left;right影响

应用场景

常用于重置定位属性

4、定位元素的层级顺序

元素的定位与文档流无关;所以它们可以覆盖页面上的其它元素。 z-index属性指定了一个元素的堆叠顺序;哪个元素应该放在前面或后面;。

取值

auto(默认值) 堆叠顺序与父元素相等

数值;拥有更高堆叠顺序;数值越大;的元素总是会处于堆叠顺序较低的元素的前面

总结

普通层;浮动层;定位层覆盖关系总结

提示;从父原则

5、实现盒子居中的方法

方法一;

实现思路;margin负值配合百分比。

方法二;

实现思路;left;right;top;bottom并用;配合margin;auto。

如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的;那么元素的“height”和“width”将隐式地由偏移量决定。 如果包含块是块级;则相对于包含块的边界即;包括padding;;如果包含块是行级;则相对于包含块的内容区域。

注意;ie低版本不兼容;