详解css相对定位和绝对定位

Jaden 发布于2019-08-28 17:57 / 2096人阅读

摘要：以上两点点可以总结出，相对定位总是以父级左上角为原点进行定位的，如果父级不存在，则以浏览器左上角进行定位。

赞助我以写出更好的文章，give me a cup of coffee?

2017最新最全前端面试题

案例代码1

相对定位具有的属性-1

1.如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolute不同)

点击下方result查看demo：
http://jsfiddle.net/trigkit/e...

案例代码2

相对定位具有的属性-2

2. 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决 定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。

http://jsfiddle.net/trigkit/e...

以上两点点可以总结出，相对定位总是以父级左上角为原点进行定位的，如果父级不存在，则以浏览器左上角进行定位。

相对定位的规律

1.使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置
2.使用相对定位的盒子仍在标准流中（会占据原来的位置），它对父亲和兄弟盒子都没有任何影响

绝对定位

案例代码1

absolute具有的属性-1

1.如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

http://jsfiddle.net/trigkit/e...

案例代码2

absolute具有的属性-2：

2.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决 定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影 响。

点击下方result 查看demo

http://jsfiddle.net/trigkit/e...

以上两点可以总结出:

若想把一个定位属性为absolute的元素定位于其父级元素内

，必须满足两个条件：

设定TRBL

父级设定Position属性

绝对定位的规律

1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

2.绝对定位的框从标准流中脱离，这意味着他们对其后的兄弟盒子的定位没有影响，其他的盒子好像就好像这个盒子不存在一样

（1）所谓“已经定位”元素的含义是，position属性被设置。

以上造成的细微偏差大家可以通过QQ截图工具查看，到方框的应该是100像素，到浏览器最边缘的应该是110像素。

GPU云服务器云服务器相对定位-绝对定位相对定位绝对定位相对定位自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110916.html

带你走进CSS定位详解

摘要：相对于其最近的一个定位设置的父对象进行绝对定位，可用。代码基本语法默认值，无特殊定位。代码相对定位相对定位生成相对定位的元素，相对于其它位置进行定位。结语结语带你走进定位详解，多试试，熟能生巧嘛学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。一：定位定位属性列表 position top...

googollee 2019-04-23 13:29 评论0 收藏0
css position: absolute、relative详解

摘要：在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。放置绝对定位对象在可视区域之外会导致滚动条出现。相对定位是相对于元素在文档流中初始位置的，而绝对定位是相对于最近的已经定位的祖先元素。 CSS2.0 HandBook上的解释：设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占...

h9911 2019-08-28 18:00 评论0 收藏0
前端技术之_CSS详解第六天--完结

前端技术之_CSS详解第六天--完结一、复习第五天的知识 a标签的伪类4个：　　a:link 没有被点击过的链接　　a:visited 访问过的链接　　a:hover 悬停　　a:active 按下鼠标不松手顺序就是“love hate”准则。可以简写： 1 a{ 3 } 4 a:hover{ 6 } background系列属性，CSS2.1层面 ...

番茄西红柿 2019-04-23 13:44 评论0 收藏0
[CSS]CSS Position 详解

摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...

xiguadada 2019-08-29 15:23 评论0 收藏0
[CSS]CSS Position 详解

摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...

alexnevsky 2019-08-02 10:26 评论0 收藏0