HTML中块元素的定位属性——静态定位、绝对定位与相对定位与固定定位块元素的定位：
元素的定位属性：
（1）：定位模式：
在CSS中，position属性⽤于定义元素的定位模式，其基本语法格式如下：
position属性的常⽤值有四个，分别表⽰不同的定位模式，具体如下表所⽰。
（2）：边偏移：
定位模式(position）仅仅⽤于定义元素以哪种⽅式定位，并不能确定元素的具体位置。在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分⽐，对它们的具体解释如下表所⽰。
静态定位：
静态定位是元素的默认定位⽅式，当position属性的取值为static时，可以将元素定位于静态位置。
所谓静态位置就是各个元素在HTML⽂档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定⾃⼰的位置，所以当没有定义position属性时，
并不说明该元素没有⾃⼰的位置，它会遵循默认值显⽰为静态位置。
在静态定位状态下，⽆法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
相对定位：
相对定位是将元素相对于它在标准⽂档流中的位置进⾏定位，当positition属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在⽂档流中的位置仍然保留。
绝对定位：
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的⽗元素进⾏定位，若所有⽗元素
都没有定位，则依据body根元素（浏览器窗⼝）进⾏定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
将绝对定位与相对定位相联系：
css固定定位<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.demo{
width: 180px;
height: 200px;
border: 3px solid red;
margin: 20px auto;
position: relative;
}
.demo1{
width: 80px;
height: 80px;
background-color: tomato;
position: absolute;
left: 100px;
top: 10px;
}
.demo2{
width: 80px;
height: 80px;
margin: 30px auto;
background-color:violet;
position: absolute;
left: 150px;
top: 20px;
}
.demo3{
width: 80px;
height: 80px;
margin: 25px 158px;
background-color: yellow;
position: relative;
top: 80px;
left: 100px;
}
.demo4{
width: 80px;
height: 80px;
background-color: magenta;
/* position: relative;
top:-30px;
left: 50px; */
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
</div>
</body>
<html>
固定定位：
固定定位是绝对定位的⼀种特殊形式，它以浏览器窗⼝作为参照物来定义⽹页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准⽂档流的控制，始终依据浏览器窗⼝来定义⾃⼰的显⽰位置。不管浏览器滚动条如何滚动，也不管浏览器窗⼝⼤⼩如何变化，该元素都会始终显⽰在浏览器窗⼝的固定位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。