定位:让元素的位置放生改变。
css定位需要几步:
1: 让元素知道自己要做位置的变动。
2:确定谁是参照物
3:指定固定的坐标
定位属性:
position属性:设置或检索元素定位方式。
(如果元素有了position属性,元素就知道自己要做位置的移动了)
position的属性值:(属性值才是告诉元素参照物是谁)
指定坐标:left\right\top\bottom(比如left:50px;top:60px;值为0就是贴紧参照物)
position的属性值:
1: position:static 【静态定位】 (默认值:添加和不设置的效果一样的)
2: position:absolute 【绝对定位】
(可以只添加定位,让其成为参照物,可以不添加坐标值)
a: 绝对定位的参照物:
相邻已经有定位的父元素为参照物(就是在参照物里面进行位置移动)
如果父元素都没有定位或者没有父元素,以整个文档(浏览器窗口)为参照物
b: 绝对定位的特点:
不占据空间,脱离布局流
注:添加绝对定位position:absolute;后 浮动无效 margin:0 auto 左右居中无效。
3: position:relative; 【相对定位】
a: 参照物是自身默认的位置
b: 特点:
(1)占据空间的,不破坏布局流。
(2)如果一个元素有相对定位,也支持margin:0 auto;
包含块的设置:
1:给父元素添加position:relative;目的:让当前父元素形成参照物(包含块)
2:给要做定位的元素添加position:absolute; 移动位置。
定位元素的层次关系:
默认情况下:
结构里面后写的元素添加定位,会把前写的元素盖住
控制定位元素的层次关系的属性:
z-index:;
属性值:一个数字,数字值越大越靠上层显示。能接收负数。
默认值auto