绝对定位
绝对定位,相对于第一个非 static 定位的父级元素进行定位,可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素,则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
<head>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 300px;
}
div {
position: absolute;
top: 0px;
left: 600px;
border: 1px solid red;
width: 600px;
height: 600px;
}
#img1 {
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div>
<img src="/html/img/03.jpg" alt="" id="img1">
</div>
<img src="/html/img/04.jpg" alt="" id="img2">
</body>
相对定位
相对定位,即相对于元素的正常位置进行定位,您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量,在此过程中不会对其它元素造成影响。
<head>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 300px;
}
#img2 {
position: relative;
top: 600px;
left: 300px;
}
</style>
</head>
<body>
<img src="/html/img/04.jpg" alt="" id="img1">
<img src="/html/img/04.jpg" alt="" id="img2">
<img src="/html/img/04.jpg" alt="" id="img3">
</body>
绝对定位与相对定位的区别:
绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层,文本流放在首层),它们之间互不影响;相对定位元素在首层,与文本流一起存放,它们之间互相影响。被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除,它浮了起来,其实设置了相对定位也会让元素浮起来,但它们的不同点在于,相对定位不会删除它本身在文档流中占据的空间,其他元素不可以占据该空间,而绝对定位则会删除掉该元素在文档流中的位置,使其完全从文档流中抽了出来,其他元素可以占据其空间。
固定定位
固定定位,相对于浏览器的创建进行定位,可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
<head>
<style>
img {
position