CSS深入理解学习笔记之relative

1、relative和absolute的相煎关系

  限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在overflow下的嚣张气焰。

  relative和fixed限制作用:限制z-index层级。

2、relative和定位

  特性:①相对自行进行定位;②无侵入,不影响其他元素布局。

  top/bottom和left/right对立属性同时存在时的表现:top>bottom left>right

3、relative和层级

  提高元素的层叠上下文。

  新建层叠上下文与层级控制:relative元素的z-index是auto的时候,不会限制子元素的层叠。(IE8+)

4、relative的最小化影响原则

  定义:尽量降低relative属性对其他元素或者布局的潜在影响。

  原则:①尽量避免使用relative;②relative最小化,将需要absolute定位的元素放到一个空的relative元素中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

1462
来自专栏前端知识分享

第101天:CSS3中transform-style和perspective

1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。

973
来自专栏达摩兵的技术空间

动态内容的等高布局实现

首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

743
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

1925
来自专栏程序员阿凯

为 DP 设计布局

1135
来自专栏yang0range

CSS常见属性

现在的互联网前端三层: HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS ...

883
来自专栏何俊林

Android TV开发总结(五)TV上屏幕适配总结

前言:前面几篇总结一些TV上的小Sample,开源到GitHub: https://github.com/hejunlin2013/TVSample, 点击”阅...

2419
来自专栏一“技”之长

iOS9新特性——堆叠视图UIStackView

        随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第...

431
来自专栏HTML5学堂

揭秘PhotoShop中的点与像素

HTML5学堂:PhotoShop当中,存在着这样一个单位 —— 点。对于设计师们,估计再熟悉不过了,但是对于前端开发攻城狮们,稍有些郁闷,因为点并不会完全等于...

3465
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

1684

扫码关注云+社区