绝对定位和相对定位的区别和应用【绝对定位相对于谁定位?】

您的位置：制图网首页 -> 新闻动态 -> 绝对定位和相对定位的区别和应用【绝对定位相对于谁定位?】

绝对定位和相对定位的区别和应用【绝对定位相对于谁定位?】

2023/1/31 来自于：制图网点击：34

html元素的定位类型分为：固定定位、相对定位、绝对定位和粘性定位

在网页布局中，我们可以通过很多中方式来控制页面布局，比如表格布局、flex弹性布局以及浮动布局。

但是在这些方法中，我们可能用到了一些辅助技术，那就是定位。

元素的定位，用得好，就会带来事半功倍的效果，但是一不小心也会给自己挖坑，自己踩坑。

这就需要我们了解各种定位类型中的行为了。

我们给元素设置定位，是通过position属性来设置的，它默认的属性值是static，也就是静态定位，元素未被定位。

我们常用的几种布局方式，都是通过控制文档的方式，来实现我们想要的效果。然而定位则不同，定位是把元素脱离文档流，这样就导致被定位的元素可以与其他元素重叠。

固定定位

给元素设置固定定位：

div{ position: fixed; }

再通过top、left、right和bottom四个属性，就可以将元素固定到屏幕中的任意位置。

然而这四个属性的设置，在背后却暗暗定义了元素的宽高：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .hhh { position: fixed; top: 2rem; left: 2rem; right: 2rem; bottom: 2rem; border: 1px solid red; } </style> </head> <body> <div class="hhh"></div> </body> </html>

如以上代码中，元素div并没有设置具体的宽高。但是效果如图：

那么在平常的页面布局中，常常使用来固定定位来实现：模态框、悬浮菜单或者悬浮导航等等效果。

绝对定位

决定定位，是相对于最近的祖先定位元素。同样的，属性top、right、bottom和left决定了元素的边缘位置。

经常和相对定位搭配使用。

相对定位

相对定位，是一个比较容易混淆的定位，因为我们给元素设置相对定位后，在页面中没有任何的视觉变化，相对定位的元素和它周围的元素，保持着原本的位置。就算是设置top、left和right、bottom，效果也仅仅是将相对定位的元素移动位置，其他元素依旧没有变化。这样我们就可以认为相对定位，并没有让元素脱离当前文档流，元素依旧占据文档流中的位置。

小提示：

相对定位中的top、right、bottom和left属性并不能改变元素的大小，它们仅仅改变元素的位置。另外，top和bottom不能同时使用，因为bottom会被忽略，同样left和right也不能同时使用，因为right会被忽略。

我们在页面布局中，常常使用相对定位来给它的子元素的绝对定位创建一个包含块。

重叠和z-index

在使用定位的时候，经常会出现元素重叠或者元素移动到浏览器视口之外。

元素移动到视口之外，这个好理解，但是元素重叠，就不太容易找到本质原因了。

可能在面试时，我们常常给的答案是元素设置定位后，可能导致它脱离文档流，它和周边的元素就不处在同一个层次，就导致在视觉出现重叠的效果。

实质上是，浏览器在将html解析为DOM的同时，还创建了一个树形结构，叫做渲染树，它表示每一个元素的视觉样式和位置，同时决定了浏览器绘制元素的顺序。

通常情况下。元素在html里面出现的顺序决定了绘制顺序，这时，突然有个元素被设置定位了，浏览器先绘制非定位元素，所有的定位元素最后才绘制，这样就导致元素的顺序错乱而产生了重叠现象。

尽管出现重叠现象，我们可以通过设置z-index，来控制元素的层叠顺序。

粘性定位

粘性定位是相对定位和固定定位的结合体，通常情况下，元素是会随着页面滚动的，当达到屏幕的某个位置的时候，元素就固定在该位置。常见就是侧边栏、客服弹窗。