绝对定位和相对定位

Posted 2022-10-24 muxi95

定位布局：视觉格式化模型：css的一种机制，规定了页面找那个多个盒子的布局。

视口：指浏览器的可视区域

定位体系：

常规流（normal flow）

浮动（float）

绝对定位（absolute positioned）

绝对定位     absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位即html元素。

父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。

父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块

 

相对定位     relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

也可以通过设置 z-index 属性来控制这些框的堆放次序。