css定位 position

旧时模样 提交于 2020-01-25 16:01:13

position 属性指定了几种元素的定位类型

固定定位 fixed:

  生成绝对定位的元素,相对于浏览器窗口进行定位。

  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  如果有多个固定定位标签,都是参考窗口,所以之间不相互影响,但可能出现图层重叠,通过 z-index 值绝对图层上下关系

 

绝对定位 absolute:
1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的),且兄弟标签之间布局不影响(兄弟动,自身相对父级还是保持静止)

2、z-index 值能改变重叠的兄弟图层上下关系

3、子级相对的父级一定要 定位处理 (三种定位均可以)

       父级要先于子级布局,所以子级在采用绝对定位时,父级一般已经完成了布局,如果父级采用了 定位 来完成的布局,子级自然就相当于  父级完成 绝对定位

    如果父级没有采用 定位 来完成的布局,我们要后期为父级增加 定位 处理,来辅助子级 绝对定位,父级的 定位 是后期增加的,我们要

  保证增加后不影响父级之前的布局,相对定位可以完成

相对定位 relative

  生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

  在使用中大多数情况是父元素使用相对定位子元素使用绝对定位

  相对定位也存在独立使用,但是可以用盒模型完全取代,所以一般不用

static 定位

HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!