摘要：下面我们来看一段代码这段代码设置了类名为的元素相对定位。使用了相对定位的元素，仍然会在标准流中占据原来的位置，它对父元素和兄弟元素没有影响。相对定位的使用场景往往是作为绝对定位元素的参照物。
1.相对定位
相对定位：从这个名字我们就可以知道，这是一种相对某个元素定位的一个方法。
那么，我们到底是相对哪个元素来定位的呢？
其实这个元素不是其他元素，而是这个元素本身，即应用相对定位方法的这个元素。
下面我们来看一段代码：
.bottom{position:relative;
top:20px;
left:50px;}
这段代码设置了类名为bottom的元素相对定位。下面来看一下效果。
未应用定位前：
相对定位后：
从上图中我们可以看出应用了相对定位的元素，相对于其本身的位置向下移动了20px(top:20px)，向左移动了50px（left:50px）。另外我们可以看到其后面的元素并没有占据它的位置，我们可以知道，它仍在标准流中占据原来的位置。
现在让我们总结一下相对定位的几个特点：
1.使用了相对定位元素的元素，其参照物是其本身，其偏移量由TRBL(top，right,bottom,left)的值确定。
2.使用了相对定位的元素，仍然会在标准流中占据原来的位置，它对父元素和兄弟元素没有影响。
3.相对定位的使用场景往往是作为绝对定位元素的参照物。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115101.html
摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。 这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...
摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。 这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...
摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。 一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...
摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。 一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...
摘要：注意当该固定元素的祖先元素的属性非时，容器由浏览器窗口改为该祖先元素粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。理论上来说，全部 position 的取值有8个 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
阅读 2080·2021-10-14 09:43
阅读 2178·2019-08-30 15:55
阅读 712·2019-08-30 14:23
阅读 1993·2019-08-30 13:21
阅读 1218·2019-08-30 12:50
阅读 2177·2019-08-29 18:46
阅读 2263·2019-08-29 17:28
阅读 2335·2019-08-29 17:21
