css中的5种定位方式
作者：互联网
css定位方式：
css定位方式的属性是position:属性值;
作用：检索或者设置元素的定位方式。
定位的步骤:
1.给要做位置变化的元素添加position属性 2.确定参照物。3.确定坐标。
第一种方式：position:static;
position的默认值，默认文本流的状态。
第二种方式：position：absolute；（绝对定位）
1.absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
2.参照物：按照已经有定位的父元素进行位置变化，假如当前元素没有父元素或者父元素没有设置定位的情况下，以整个文档为参照物。
3.定位为absolute的层脱离正常文档流。
初始效果：
最终效果：
第三种定位方式：position：relative；（相对定位）
1.通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级
2.参照物：自身默认位置
3.始终占据空间，不会破坏文档流！
初始效果：
最终效果：
第四种定位方式：position：fixed；（固定定位）
1.元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
2.参照物：生成绝对定位的元素，相对于浏览器窗口进行定位。
3.脱离文本流，不占据空间！
初始效果：
最终效果：
第五种定位方式：position：sticky；（黏性定位）
1.元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
2.如果页面超出窗口范围，按照relative执行；如果内容超出窗口位置，按照fixed执行！
初始效果：
最终效果：
chuxin_52hz
发布了1 篇原创文章 · 获赞 0 · 访问量 56
私信
关注
标签：定位,right,方式,参照物,top,元素,position,css 来源： https://blog.csdn.net/chuxin_52hz/article/details/104448919