web中相对定位_相对浏览器定位

目录：

• 1、html的相对定位和绝对定位是什么意思
• 2、为什么用absolute定位的元素，其父元素通常需要relative相对定位呢？
• 3、划线定位方式有四种

html的相对定位和绝对定位是什么意思

position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px;

这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top

left在定位。应该用margin。比如：div

class="1e6a-d292-86f8-6de8 1"/divdiv

class="d292-86f8-6de8-815b 2"/div当1固定了位置。1的样式float:left;width:100px;

height:800px;2的样式为float:left;

position：relative；margin-left:20px;width:50px;2的位置在1的右边，距离120px

为什么用absolute定位的元素，其父元素通常需要relative相对定位呢？

绝对定位（absolute）是需要一个坐标系才能实现的，也就是说必须先确定原点(0,0)，然后才能把指定的元素定位到一个指定的地点，而坐标系从何而来呢？一般是用离自己最近、且必须是定位元素（绝对定位absolute、相对定位relative、固定定位fixed均可）的祖先元素，如果所有祖先元素都不是定位元素，就用网页最外层的根元素（也就是浏览器的窗口可视范围）作为坐标系。而相对定位（relative）则不需要外部的坐标系，而是以自身作为坐标系的，所以只要把父元素设为relative，把子元素设为absolute，那么子元素就可以在父元素的范围内进行绝对定位了

划线定位方式有四种

划线定位方式有四种，定位布局共有四种方式：

（1）固定定位（fixed）；

（2）相对定位（relative）；

（3）绝对定位（absolute）；

（4）静态定位（static）。

1、固定定位

当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置（在视野中），相对屏幕的可视区进行定位。固定定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器窗口的位置，造成元素完全脱离文档流，改变元素类型，多用于“回顶部”特效和固定栏目的设置。

2、相对定位

当元素的position属性设置为relative时，此时元素便具有相对定位的特性。相对定位的元素，其位置是相对于它的原始位置计算而来的，同样具有top、bottom、left和right这4个属性。相对定位不使元素脱离文档流，不改变元素的本身类型。

3、绝对定位

绝对定位absolute,是定位属性中出场频率最高的一个，一般配合relative使用，真正的实现了“指哪打哪”的效果。一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素“浮”在其他元素上面。绝对定位会改变元素的本身类型（行内元素会变成块元素），其位置如果有定位父级相对于定位父级发生偏移，如果没有定位父级相对于整个文档发生偏移。

4、静态定位

如果没有指定元素的position属性值，元素也就是静态定位。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。这个属性一般很少使用，不支持left、top等属性值，使用场景一般在清除其他定位属性上。

标签：相对浏览器定位