知识总结
一、定位的流程:
给元素添加position属性。(告诉元素开始进行位置移动)
属性值来确定参照物
固定坐标
二、position的属性值
Position:static;(静态定位)
Position:absolute;(绝对定位)
Position:relative;(相对定位)
(1)Position:absolute;
参照物:有定位的父元素,如果没有父元素或者父元素没有定位,以整个文档为参照物。
特点:不占据空间,脱离布局流
注:绝对定位Position:absolute;浮动无效,margin:0 auto;左右居中无效。
(2)position:relative;
参照物:以自身默认的设置为参照物。
特点:占据空间,不脱离布局流。
注:相对定位position:relative;支持浮动和margin:0 auto;左右居中。
三、包含块的设置
1:给父元素添加position:relative;目的是让当前父元素形成参照物(包含块)
2:给要做定位的元素添加position:absolute;移动位置
拓展:默认情况下,结构里面后写的元素添加的定位会把前面的写的元素盖住。
控制定位元素的层次关系:z-index:;属性值:一个数字,数字值越大,越靠上显示。(能接受负值,默认值是auto)
重点:网页布局应首选浮动+盒模型。
什么时候用定位?
当元素产生层次关系或者是不规则布局的时候用定位。