CSS 中的position属性说明了元素或 HTML 实体的定位方法。 CSS 中有五种不同类型的位置属性可用：
- 固定的
- 静止的
- 相对的
- 绝对
- 黏
元素的定位可以使用top 、 right 、 bottom和left属性来完成。这些指定 HTML 元素与视口边缘的距离。要通过这四个属性设置位置，我们必须声明定位方法。
让我们详细讨论这些位置方法中的每一种：
1. 固定
任何具有position: fixed属性的 HTML 元素都将相对于视口定位。即使我们滚动页面，具有固定定位的元素也可以保持在同一位置。我们可以使用顶部、右侧、底部、左侧来设置元素的位置。
html code<-->
This div has position: fixed;
Lorem ipsum dolor sits amet, consectetur adipiscing elit.
Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
Maecenas nec mi eget leo malesuada vehicula.
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
下面是用于说明固定属性的 CSS 代码：
// css code
body
{
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.fixed
{
position: fixed;
background: #cc0000;
color: #ffffff;
padding: 30px;
top: 50;
left: 10;
}
span
{
padding: 5px;
border: 1px #ffffff dotted;
}
输出：
2. 静态
这种定位方法是默认设置的。如果我们不提及任何元素的定位方法，则该元素默认具有 position:static方法。通过定义 Static，顶部、右侧、底部和左侧将无法控制元素。该元素将按照页面的正常流程进行定位。
html code<-->
This div has position: static;
Lorem ipsum dolor sits amet, consectetur adipiscing elit.
Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
Maecenas nec mi eget leo malesuada vehicula.
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
下面是用于说明静态属性的 CSS 代码：
// css code
body
{
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.static
{
position: static;
background: #cc0000;
color: #ffffff;
padding: 30px;
}
span
{
padding: 5px;
border: 1px #ffffff dotted;
}
输出：
3. 亲属
具有 position: relative的元素与位于其顶部的其他元素相对定位。如果我们设置它的顶部、右侧、底部或左侧，其他元素将不会填补该元素留下的空白。
html code<-->
This div has
position: relative;
Lorem ipsum dolor sits amet, consectetur adipiscing elit.
Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
Maecenas nec mi eget leo malesuada vehicula.
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
下面是用于说明相对属性的 CSS 代码：
// css code
body
{
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.relative
{
position: relative;
background: #cc0000;
color: #ffffff;
padding: 30px;
}
span
{
padding: 5px;
border: 1px #ffffff dotted;
}
输出：
4.绝对
具有 position: absolute的元素将相对于其父元素定位。该元素的定位不依赖于它的同级元素或处于同一级别的元素。
html code<-->
Lorem ipsum dolor sits amet, consectetur adipiscing elit.
Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
Maecenas nec mi eget leo malesuada vehicula.
This div has position: relative;
This div has position:
absolute;
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
下面是用于说明绝对属性的 CSS 代码：
// css code
body
{
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.absolute
{
position: absolute ;
background: #cc0000;
color: #ffffff;
padding: 30px;
font-size: 15px;
bottom: 20px;
right: 20px;
}
.relative
{
position: relative;
background: #aad000;
height: 300px;
font-size: 30px;
border: 1px solid #121212;
text-align: center;
}
span
{
padding: 5px;
border: 1px #ffffff dotted;
}
pre
{
padding: 20px;
border: 1px solid #000000;
}
输出：
5. 粘性
具有position:sticky和top:0 的元素根据放置的位置在固定和相对之间发挥作用。如果元素被放置在文档的中间，那么当用户滚动文档时，粘性元素开始滚动直到它接触到顶部。当它触及顶部时，尽管进一步滚动，它仍将固定在该位置。我们可以使用底部属性将元素粘贴在底部。
html code<-->
Lorem ipsum dolor sits amet, consectetur adipiscing elit.
Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
Maecenas nec mi eget leo malesuada vehicula.
This div has position: sticky;
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
下面是说明粘性属性的 CSS 代码：
// css code
body
{
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.sticky
{
position: sticky;
background: #cc0000;
color: #ffffff;
padding: 30px;
top: 10px;
right: 50px;
}
span
{
padding: 5px;
border: 1px #ffffff dotted;
}
pre
{
padding: 20px;
border: 1px solid #000000;
}
输出