定位
定位流程:
a: 给元素添加position属性.(告诉元素:开始进行位置移动)
b: 属性值来确定参照物.
c: 固定坐标. left /right /top / bottom
position得属性值:
(1) position:static ( 静态定位 )
(2) position:absolute; (绝对定位)
参照物:
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素,以整个文档为参照物。
特点:不占据空间,脱离布局流
(3) position:relative;(相对定位)
参照物:自身默认的位置
特点:占据空间的,不破坏布局流;
如果一个元素有相对定位,也支持margin:0 auto;
注:绝对定位position:absolute; 浮动无效, margin:0 auto 左右居中无效。
包含块的设置
1:给父元素添加position:relative;
目的:让当前父元素形成参照物(包含块)
2:给要做定位的元素添加position:absolute; 移动位置。
例子:(新闻图片)
控制定位元素的层次关系
默认情况下:
结构里面后写的元素添加定位,会把前写元素盖住
解决办法:z-index:;
属性值:一个数字,数字值越大越靠上层显示。能接收负数。
默认值auto
总结
1.网页布局:
首选 浮动 + 盒模型
2.什么时候用定位:
当元素产生层次关系,或者是不规则布局。
3.相对定位 和 绝对定位的区别:
参照物的区别
是否破坏布局流
4.包含块的设置:
给父元素添加 position:relative;形成参照物
给要做定位的子元素添加position:absolute;
5.定位元素的层次关系: z-index