CSS的定位

css总结 专栏收录该内容
10 篇文章 0 订阅

一、相对定位

position: relative;

1、不影响元素本身特性,没有定位偏移量时对元素无影响
2、相对定位的元素仍然在文档流中,仍然占据着他本来占据 的位置空间(虽然他现在已经不在本来的位置了)。
3、可以通过设置(“left”、“top”、“right”、“bottom”)垂直或水平位置,让这个元素“相对于”它的起点进行移动。
4、提升层级,用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值大者在上面

position:relative和负margin都可以使元素位置发生偏移,他们的区别:
相对定位可以使元素发生偏移,但是在文档流中,它仍然占据着原来的位置,所以其他元素的位置不会发生变化
通过负margin偏移的元素会放弃偏移前占据的空间,后面的其它元素就会“流”过来填充,所以它们位置发生了变化。

二、绝对定位

  position: absolute;

1、使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。
2、使内联元素在设置宽高的时候支持宽高,区块元素在未设置宽度时由内容撑开宽度(改变元素的特性) 3、相对于 static
定位以外的第一个祖先元素进行定位(其父元素没有定位则逐层上找,直到document)。元素的位置通过偏移值进行规定。
4、提升层级,用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值大者在上面

三、固定定位

position: fixed

1、元素的表现类似于将 position 设置为 absolute,不过其包含块是视窗(window)本身。
2、定位效果类似之前学过的固定背景,元素与视窗始终相对静止。元素的位置通过偏移值进行规定。
3、提升层级,用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值大者在上面

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值