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 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2440
来自专栏Material Design组件

Material Design — 按钮( Buttons)

42616
来自专栏前端知识分享

第101天:CSS3中transform-style和perspective

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

1783
来自专栏GIS讲堂

地图切片详解

地图切片很多做GIS的筒子都不陌生,但是其中的原理一直是马马虎虎,在此,就地图切片中的几个重要的概念做一个介绍,一则自己做个总结,二则希望能够帮助到有此困惑的战...

7052
来自专栏一“技”之长

iOS9新特性——堆叠视图UIStackView

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

931
来自专栏成长道路

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 ? lis...

2920
来自专栏我和未来有约会

Silverlight初级教程-绘图布局

Silverlight初级教程 绘图布局 正如之前所说Blend是和flash很像的东西。在这里将介绍一下如何在Blend中绘图。 这里的Blend中“舞台...

1918
来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

7458
来自专栏HTML5学堂

揭秘PhotoShop中的点与像素

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

3765
来自专栏何俊林

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

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

2939

扫码关注云+社区

领取腾讯云代金券