CSS深入理解之relative

今天看到一个特别有趣的视频，讲解position：relative，听完这个老师生动的讲解，瞬间就懂了

总结：
1 . position:absolute; 他的意思是绝对定位，默认上溯父级元素，找第一个不是 static 的元素，以其为 absolute 的基准。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
2 . position:relative ; 参考自身静态位置通过 top,bottom,left,right 定位
3 . relative 是无侵入定位，即在相对定位中，虽然表现区脱离了原来的文本流，但是仍占据原来位置空间（可应用于拖拽）

4 . relative如果设置对立属性，如left/right，top/bottom，left和top优先（绝对定位是拉伸，相对定位是斗争）
5 .relative 可以提高层叠上下文：当网页中两个元素有重叠关系时，一般是DOM流后面出现的元素覆盖前面的，但是position:relative 可以把被覆盖的元素提高层叠次序
6 . 当relative设置z-index时，就会新建层叠上下文，z-index值高的元素，自身及子元素的层叠次序都会上升；z-index值为0时，内部元素就自由了，relative不再对内部z-index做限制（IE6，7除外）

relative的最小化影响准则：
即，如何尽量降低relative属性对其他元素或布局的潜在影响！
1 .尽量不使用relative
absolute定位不依赖relative，可以直接position:absolute脱离文档流之后用margin进行偏移
如：不需要父容器设置position:relative，也可以让子容器定位在顶部

<div class="container"><div class="row"><div class="col-xs-12"><div>aaa</div><div style="position: absolute ;margin-top: -6%;">bbb</div><div>ccc</div></div>
</div>

2 .relative最小化
当需要定义在容器的右上角时，难以用上面方法完美实现，需要应用relative最小化原则：即对需要定位元素单独放置在一个空div里，并只对这个最小父div设置position:relative

CSS深入理解之relative相关推荐

学习笔记之CSS深入理解（慕课网张鑫旭主讲）
一.CSS深入理解之border 1. border-width不支持百分比受语义和使用场景决定的,不会因为设备大而边框变大的 2. border-style属性 border-style:dott ...
CSS：理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
[css] 你所理解的css高级技巧有哪些？
[css] 你所理解的css高级技巧有哪些? 各种动画效果,能用css的都可以不去用js写的,对我来说就很高级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧 ...
html css 深入理解float
html css 深入理解float 首先,我们来看一段权威的关于float的解释: "浮动会让元素脱离文档流,不再影响不浮动的元素.实际上,并不完全如此.如果浮动的元素后面有一个文档流中的 ...
CSS深入理解之line-height
以下文字整理自慕课网--张鑫旭的<CSS深入理解之line-height>. 一.line-height的定义 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这 ...
html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
CSS中的position:relative理解
今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明包含关系:父级absolute,子级relative: 包含关系 ...
CSS深入理解z-index（z-index相关知识总结）
一.z-index基础内容(入门级掌握) 1.z-index含义: z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定当元素发生覆盖的时候,哪个元素在上面.通常一个较大z-ind ...

CSS深入理解之relative

CSS深入理解之relative相关推荐

最新文章

热门文章