1.定位的含义:
定位就是将指定的元素摆放到页面的指定位置,可以通过定位来摆放元素的位置。
2.定位的实现:
通过position属性来设置元素的定位,相关的属性如下:
relative | 开启元素的相对定位 |
absolute | 开启元素的绝对定位 |
fixed | 开启元素的固定定位 |
sticky | 开启元素的粘性定位 |
下面就来逐个举例说明这几个定位的含义。
3.相对定位:当给元素的position设置relative属性时,就开启了元素的绝对定位。
<style>
#nav1{
width: 100px;
height: 100px;
background: aqua;
position: relative;
left: 50px;
top: 50px;
}
#nav2{
width: 100px;
height: 100px;
background: red;
}
#nav{
background: bisque;
}
</style>
<body>
<div id="nav">
<div id="nav1">
</div>
<div id="nav2">
</div>
</div>
如上图所示我对nav1开启了相对定位,对nav2未开启定位,会发现,nav2自动换行,而且距离顶部有一定的距离,说明:
①相对定位是相对于元素原来的位置进行定位的
②相对定位不会脱离标准文档
③相对定位不会改变匀速本来的性质,块级还是块级
④相对定位可以保留元素的位置,是处于被占用状态。
⑤可以通过 left,right,bottom,top来设置元素距离原本位置的距离
结果如下图所示:
4.绝对定位:当给元素的position设置absolute属性时,就开启了元素的绝对定位
<style>
#nav1{
width: 100px;
height: 100px;
background: aqua;
position: absolute;
left: 50px;
top: 50px;
}
如上面代码所示,我将nav1的position属性设置成absolute,就开启了绝对定位。nav2没有开启定位,结果如下图所示。nav2没有换行,说明了:
①脱离标准文档流
②不保留原来的位置
③会改变元素的特性,不管是行内元素还是块级元素,使用定位之后特性更像行内块级元素
相对定位还有一种情况:父亲有定位
#nav{
background: bisque;
position: relative;
left: 100px;
top: 50px;
}
如上图所示,我将nav1和nav2的父级nav开启了相对定位,向左偏移100px,向下偏移50px,此时再对两个子集元素开启决定定位,会发现子集元素是以父级的位置为起点进行偏移的
5.固定定位:当元素的position属性设置fixed时,则开启了元素的固定定位。
<style>
.div1{
position: fixed;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div class="div1">
<img src="./images/user.png">
</div>
<p>这是一段文字</p><p>这是一段文字</p>
<p>这是一段文字</p><p>这是一段文字</p>
.......
</body>
如上图所示,我div1开启了固定定位,在下面添加了许多文字,这时我们的页面上图片会悬浮于文字上方,并且固定在这个位置,不论下方的文字如何变化,图片都始终在这个位置。说明:
(1)固定定位是用于将元素固定在浏览器页面上,不随浏览器的滚动而改变位置
(2)固定定位的参照物是浏览器页面,没有父级概念
(3)固定定位不占有原来的位置,即脱离标准流 ,会改变元素的性质(和浮动类似,但是文字不会环绕)
6.粘性定位:当元素的position属性设置为sticky时,则开启了元素的粘滞定位,一般用于网页的吸顶效果。
.nav{
/* 粘性定位 */
position: sticky;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
如上图所示,开启粘性定位,效果如下图所示,不论怎么滑动鼠标,导航栏位置始终在最顶部,粘性定位有以下几个特性:
(1)和固定定位类似,都是以浏览器为父类,进行定位
(2)占有原来位置,不会脱离文档流