css的定位属性

定位:让元素的位置放生改变。
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
发布了21 篇原创文章 · 获赞 0 · 访问量 209

猜你喜欢

转载自blog.csdn.net/weixin_46579411/article/details/105162060