css中的绝对定位和相对定位有什么区别？

说实话，刚接触CSS的时候，绝对定位和相对定位让我头疼了一段时间。
你提到的绝对位置会改变显示类型，这实际上是一个有趣的细节。

给我印象最深的是当我在做布局时，一个列表项被设置为position:absolute。
结果，旁边的所有文字都被推到了顶部。
检查后发现自动变成了inline block。
这就像突然给一行文本中的单词添加了一个框架。
以前它们并不平行，但现在它们可以占据自己的空间。

有趣的是，相对定位要温和得多。
如果你给它定位：相对，它会留在原处而不影响其他人。
这就好像你给它画了一个看不见的盒子，它在盒子里面移动，但页面的其他部分不受影响。

我以前在电子商务项目中遇到过这种陷阱。
弹出层使用position:absolute，并且旁边有一个按钮。
结果，该按钮也被删除，因为绝对定位将脱离文档流。
后来我通过使用position:fix和z-index解决了这个问题。
当时我不明白为什么 fast 不会影响 z-index。
后来查资料发现fixed是相对于浏览器视口的，所以其他元素不受影响。

我记得的数据是，大约9 5 %的网站布局都使用这两个位置，但具体比例可能有点极端，取决于统计口径。
关键是要了解它们如何影响文档流程。
绝对定位是脱离文档流，直接找到距离最近的定位祖先元素的位置；相对定位是在其原始位置绘制一个不可见的盒子并在其中移动。

我个人没有详细了解过移动端定制的细节，但我估计在老款机型上绝对定位带来的性能问题可能会更加明显。
因为浏览器要重新计算一堆元素的位置。

Data：我记得position:fixed是在IE8 左右开始支持的。
当时，绝对定位仍然是主流。
现在的新项目基本都使用Flexbox或者Grid，但是老代码中还是有很多绝对定位的痕迹。

无论如何，一旦了解了两者的区别，很多布局问题就会迎刃而解。
大家知道，绝对定位会让元素内联块，所以你不会傻到同时给它加上浮动。

CSS相对与绝对定位：常见陷阱与解决方案

哎，说到CSS定位，真是头疼啊。
你有没有找到过子元素的绝对位置？代码明明写的是正确的，但是位置却歪了？我曾经踏入过这个洞，所以我太了解那种疯狂的感觉了。

上周，一位顾客问我为什么绝对放在她的镶框卡片盒中的小标签总是偏离中心。
当我查看代码时，嘿，是父元素的外边距导致了问题。
这些绝对定位的子元素寻找父元素的实际边界，而不是您看到的视觉边界。
你给父元素添加了边距，但是父元素本身的宽和高不包含这个边距，所以子元素的定位依据是错误的。

具体来说，例如，您有一个灰色背景的父容器 test1 ，并设置边距：1 5 px 和内边距：3 0px。
有一个绝对定位的子元素p1 如果你想放在右上角，上面写：0；正确：0；。
但结果是p1 被放置在test1 的内容区域的右上角，因为test1 的边距被扩展了，子元素没有考虑到这个空间。

实际上有两种解决方案。
核心思想是对齐父容器的视觉表现和基准位置：
1 ．最推荐的方法：将边框从子元素移动到父元素。
像这样改变它： CSS 测试1 ，测试2 ，测试3 { 位置：相对； 边距：1 5 像素； / 将边框移动到父元素/ } .base { 背景颜色：9 7 9 6 9 1 ； 边框：2 px 纯黑； /边距：1 5 px；删除这句话/ 内边距：3 0px； } p1 { 背景颜色：D7 8 9 B9 ； 字体大小：2 0px； 字体粗细：6 00； 位置：绝对； 顶部：0； 右：0； / 现在视觉test1 的右上角可以正确定位/ } 这样，父容器实际占用的空间包括其边界，绝对定位的子元素将根据这些扩展边界进行定位，从而不会对齐。

2 另一个想法：将父容器的背景和边框等视觉样式移动到子元素。
父元素只负责位置和位置上下文。
例如： CSS 测试1 ，测试2 ，测试3 { 位置：相对； 边距：1 5 像素； 背景颜色：9 7 9 6 9 1 ； /切换到子元素/ 边框：2 px 纯黑； /切换到子元素/ 内边距：3 0px； } .base { /删除背景色、边距、边距、内边距/ / 保持风格与内容相关/ } p1 { /风格不变/ } 这样，父容器就是一个纯粹的位置容器，子元素也可以通过用背景边框覆盖父元素来达到目的。
然而，有时结构有点混乱，这取决于个人喜好。

但归根结底，预防为主。
我自己遇到的陷阱是我对CSS盒子模型没有深入的理解。
你要记住：margin是外层空间，padding是内层空间，两者都占用空间。
对于绝对定位的子元素，定位基础是最近的非静态祖先元素的实际边界（宽度+填充+边框+边距），而不是您看到的视觉边界。
该浏览器的开发人员工具是天赐之物。
您可以实时看到边距、外边距、内边距以及元素位置关系，一目了然。

当我在做最近的一个项目时，我遇到了同样的问题。
我快速回收父元素的边距，或者继续设置它的样式视觉到子元素。
现在，绝对位置终于确定了。
如果你也有同样的问题，试试这两种方法应该可以解决。

CSS绝对定位与相对定位的区别？

呵呵，说到CSS布局，真是一门学问。
首先我们来谈谈相对位置。
这东西真的相当于给元素穿上了一件小衣服，而且它知道自己该站在哪里。
例如，一个div被放置在默认页面的特定位置。
如果你给它一个相对位置，把它放在上面和左边，它就会像你说的那样站起来，但就像外套一样，它会站在原来的位置，里面的人也会留在原来的位置。

我记得之前有一个项目。
当时，这种布局在网页设计中还不是很流行。
我们都使用餐桌布置。
后来我们开始使用CSS，发现相对定位非常方便。
比如你想让一个按钮远离标题，给它设置一个相对位置，然后调整上面和左边，它就会到你想要的位置，而且主要位置还在，不会碰到其他元素。

让我们来谈谈完美的姿势。
这就像将指针附加到元素上。
它应该遵循最近祖先的身体。
如果他找不到这样的祖宗，他就只能追随尸体了。
这个绝对放置的元素不占据文档流中的第一个位置，因此不会影响其他元素的位置。

在做电商网站的时候，我曾经使用绝对定位来让一些导航或者广告浮动，这样它们就不会遮挡内容，用户体验也比较好。
而且，要想使用绝对位置，首先要找到放置在相对位置或者垂直位置的祖先元素，让其有立足之地。

最后，我们来谈谈 z-index。
这个东西就像身高一样。
值越大，元素站立得越高，并且不会被其他元素阻挡。
此 z 索引对于完全定位的元素特别有用，允许您控制它们的顺序。

总之，相对定位和绝对定位各有千秋。
相对定位适合调整位置而不影响其他元素，而绝对定位适合需要从文档流中删除复杂布局或元素的情况。
在设计网站时，巧妙地运用这​​两种布局方法，可以创造出更加动感、美观的页面。