目 录CONTENT

文章目录

定位

Administrator
2020-07-24 / 0 评论 / 2 点赞 / 11029 阅读 / 2681 字 / 正在检测是否收录...

定位

在CSS里面造成元素脱流我们有两种方式,第一种是之前学过的浮动float,而剩下的一种则是我们的position定位

定位可以看成是脱流里面的特殊盒子模型,它解决了之前标准盒子模型里面的一些问题

position的本意是在元素脱流以后再去调整元素的位置

CSS里面的定位有五种方式,分别是

  1. 相对定位
  2. 绝对定位
  3. 固定定位
  4. 粘性定位
  5. 静态定位

当一个元素一旦使用了定位position以后,就会多出5个属性值出来,left/right/top/bottom可以X轴与Y轴的位置。

当一个元素一旦使用了定位position以后,就会高于普通文档流一个Z轴层级,可以通过z-index去调整这个Z轴的层级,它的默认值是0


相对定位

相对定位是元素相对于自己原来的位置再进行定位,它使用的属性值是relative,它通过left/right/top/bottom调整了自己的位置以后,仍然占用原来的位置

相对定位没有脱流,所以不具备脱流的特点

position: relative;
left: 50px;
top: 60px;

绝对定位

绝对定位使用的属性值是absolute,它会在当前的位置直接脱流,要遵守脱流的影响。

绝对定位默认以浏览器为标准进行定位,如果外层发现了其它的定位,则以这个元素为标准进行定位

position:absolute;
left:20px;
top:0px;

固定定位

固定定位使用的属性值是fixed,它在当前位置直接脱流,要遵守脱流的影响

固定定位一定是以浏览器为标准进行定位,任何定位都不能把我拦下来,并且不会随着页面的滚动条的滚动而变化

position:fixed;

静态定位

静态定位相当于清除了之前的定位,它使用static属性值

position:static;

当它使用了这个属性值以后,之前的定位效果也就会全部清除掉,元素也会回归到正常的文档流当中去

粘性定位

  1. 当它的位置让它可以正常呈现的时候,它的定位等同于 position: static,随着正常的文档流滚动
  2. 当它的位置不足以让它正常显示,但它的父元素有足够多让它显示的空间,它的定位等同于 position: fixed
  3. 当它的父元素的空间不够让它显示,它的定位等同于 position:absolute

粘性定位使用的属性值是sticky,它没有脱流,它也可以通过left/right/top/bottom来设置定位

关于子绝父相

当页面上面的一元素要以另一个元素为标准进行位置设置的时候,我们就要使用“子绝父相”这种布局概念(本意上面指的是子级元素使用了绝对定位以后,父级元素要使用相对定位来进行完成,这样就可以约束里面的绝对定位)。但是这里要注意,它只是一种概念,并不是规范。外层的元素除了relative以外,还可以使用absolutefixed也可以把它拉回来

脱流的影响

目前造成脱流的方试有浮动定位,一个元素脱流以后会有如下的影响

  1. 脱流的元素不在占用原来的位置,会造成父级元素的高度坍塌

  2. 脱流的元素高于标准文档流一个Z轴层级,在定位脱流里面还可以使用z-index调整Z轴等级

  3. 脱流以后的元素无视元素类型,通通都会变成block块级元素状态

  4. 脱流以后的元素会照成宽度丢失,宽度不再是默认是100%,而是由里面的内容去撑开(但是仍然可以通过width重新设置宽度)

  5. 脱流以后的元素会形成BFC(也就是说脱流以后的元素没有margin的折叠与穿透现象)

  6. 脱流以后的元素不再适用于标准流布局里面的任何居中规范

  7. 定位脱流以后的元素可以通过left/right来拉开宽度,可以通过top/bottom来拉开高度【这一种特点经常会用在布局切割里面】

2

评论区