CSS中的 position property讲述了元素或HTML实体的定位方法。 CSS提供了五种不同类型的position属性：
元素的定位可以使用最佳, 对, 底部和剩下属性。这些参数指定HTML元素到视口边缘的距离。要通过这四个属性设置位置, 我们必须声明定位方法。
让我们详细讨论以下每种定位方法：
1.fixed
任何带有位置：fixed属性将相对于视口定位。具有fixed位置的元素即使我们滚动页面也可以将其保持在相同位置。我们可以使用上, 右, 下, 左来设置元素的位置。
<!-->html code<-->
< body >
< div class = "fixed" >This div has < span >position: fixed;</ span ></ div >
< pre >
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.
</ pre >
</ body >下面是用于说明fixed属性的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.静态的
默认情况下设置此定位方法。如果我们不提及任何元素的定位方法, 则该元素具有位置：静态默认情况下的方法。通过定义静态, 顶部, 右侧, 底部和左侧将对该元素没有任何控制。元素将以页面的正常流程定位。
<!-->html code<-->
< body >
< div class = "static" >This div has < span >position: static;</ span ></ div >
< pre >
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.
</ pre >
</ body >下面是说明静态属性的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.相对
具有的元素职位：相对与位于其顶部的其他元素相对定位。如果我们将其设置为顶部, 右侧, 底部或左侧, 则其他元素将不会填充此元素留下的空白。
<!-->html code<-->
< body >
< div class = "relative" >This div has
< span >position: relative;</ span ></ div >
< pre >
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.
</ pre >
</ body >下面是说明相对属性的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.absolute的
具有的元素位置：absolute将相对于其父项定位。该元素的位置不取决于其兄弟姐妹或处于同一级别的元素。
<!-->html code<-->
< body >
< pre >
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.
< div class = "relative" >
< p >This div has < span >< strong >position: relative;</ strong >
</ span ></ p >
< div class = "absolute" >
This div has < span >< strong >position:
absolute;</ strong ></ span >
</ div >
</ div >
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
</ pre >
</ body >下面是CSS代码, 用于说明absolute属性：
// 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.sticky
元素与位置：sticky和最高：0扮演了一个角色fixed的和relative根据其放置位置。如果将元素放置在文档的中间, 则当用户滚动文档时, sticky元素将开始滚动, 直到它触摸顶部为止。当它触摸顶部时, 尽管进一步滚动, 它仍将fixed在该位置。我们可以将元素粘贴在底部, 底部属性。
<!-->html code<-->
< body >
< pre >
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.
< div class = "sticky" >
This div has < span >position: sticky;</ span >
</ div >
Nam eget velit maximus, elementum ante pretium, aliquet felis.
Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
</ pre >
</ body >以下是用于说明sticky属性的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 ;
}输出如下
