深入理解CSS之relative

1. 父元素 relative定位会限制子元素absolute:

  • 限制 left/top/right/bottom 定位。
  • 限制绝对定位 z-index,有相对定位的时候,z-index以相对定位为主。相对定位的z-index 不为 auto。
  • 限制绝对定位不受overflow影响的特性。绝对定位在普通元素下,overflow:scroll;overflow:hidden; 无法限制。但在相对定位的元素下,绝对定位乖乖听话。

2. relative left:100px;top:100px 相对于自身定位。

margin-top 后续元素跟随,top定位不跟随

3. relative 中 left/right, top/bottom 同时存在时,left , top 为准。

绝对定位中是拉伸。

4. relative 与 z-index 层级。

  • relative 可直接提高 z-index 层级。
z-index 不为 auto
z-index 为 auto,本不应该限制 第二个楼梯的绝对定位元素

5. 使用原则

  • 减少使用 relative
  • 在最直接,最小的元素上单独使用 relative,可在相应元素外包一层relative 定位的元素,不用在无关外面包裹一层 relative 定位的元素,要做到可控、细致。这样才不会在页面复杂的情况下,或后期要修改的时候出令人费解的问题。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,286评论 1 92
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,246评论 0 5
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 6,017评论 0 15
  • 我也不知道自己什么时候开始特别在乎星座,可能是我发现每一任男朋友都是天蝎座的原因吧!我自己是金牛座,还属牛,所以特...
    Sissi吖阅读 344评论 0 0
  • 其实很早之前就有下载绘画软件,当时可能没什么耐心,渐渐就放弃了。前几天不知怎的突然来了兴趣,就又下载了一次。 这次...
    书声懒懒阅读 336评论 2 2

友情链接更多精彩内容