一、CSS绝对定位与相对定位的区别
1、绝对定位和相对定位都可以控制元素在页面上的位置,但二者的定位方式和影响范围有所不同。
2、相对定位是相对于元素本身所在位置来进行定位,可以通过top、bottom、left、right属性的设定来控制元素所在位置的偏移量,影响仅限于该元素所在的文本流中。
.box { position: relative; /*相对定位*/ top: 20px; left: 50px; }
3、绝对定位是相对于距离自身最近的已定位的祖先元素,如果不存在已定位的祖先元素,则相对于文档的body元素来进行定位。可以通过top、bottom、left、right属性的设定来控制元素所在位置的偏移量,影响范围比相对定位更广泛。
.box { position: absolute; /*绝对定位*/ top: 20px; left: 50px; }
二、相对定位、绝对定位和固定定位的区别
1、固定定位是指元素相对于浏览器视窗的位置进行定位,不会随着滚动条的滚动而变化。
.box { position: fixed; /*固定定位*/ top: 20px; left: 50px; }
2、相对定位、绝对定位和固定定位在使用时需要注意以下几点差异:
3、相对定位是相对于元素本身所在位置来进行定位,而绝对定位和固定定位是相对于祖先元素和浏览器视窗来进行定位,所以在使用时需要对祖先元素和浏览器视窗的大小进行适当的考虑。
.relative-box { position: relative; width: 400px; height: 300px; } .absolute-box { position: absolute; width: 200px; height: 200px; top: 50px; left: 50px; } .fixed-box { position: fixed; width: 200px; height: 200px; bottom: 50px; right: 50px; }
4、另外,相对定位、绝对定位和固定定位在文档流中的位置也有所不同,相对定位不会改变元素在文档流中的位置,但是绝对定位和固定定位会将元素从文档流中拖出来,可能会对其他元素造成影响,需要进行一定的页面布局规划。
三、使用示例
.relative-box { position: relative; width: 400px; height: 300px; } .absolute-box { position: absolute; width: 200px; height: 200px; top: 50px; left: 50px; } .fixed-box { position: fixed; width: 200px; height: 200px; bottom: 50px; right: 50px; }
在上述示例中,.relative-box元素是一个相对定位的容器,.absolute-box和.fixed-box元素都是相对于该容器进行定位的,.absolute-box元素向右和向下偏移了50px,而.fixed-box元素向右和向下分别偏移了50px,并且总是停留在浏览器的右下角。