通过定位,可以实现对元素更加精确的控制。
1 引言
网页中的元素都是有一个默认的排列顺序,比如块元素,也就是类似div
之类的元素会自动占一行,同时所有元素会默认自上向下排列。
我们看一下实例代码,
<div>
<div style="background: blue; height: 100px"></div>
<div style="background: red; height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
我们可以看到,这四个div会默认自上而下排列,但是如果我们想要别的样式效果呢?比如下面的
如上面动态图右侧的分区、客服和回到旧版的按钮。就算页面上下变化,也可以固定住在屏幕右侧。
按理说,它会跟别的元素合并一块,然后随着页面上下移动的,就像我们上面那个例子那样,但是现在却脱离了原来的布局,单独跳了出来。
而这个功能实现就需要用到position
这个属性。
我们接下来好好介绍这个属性。
2 设置定位属性
position总共有static
,absolute
,relative
三种。
2.1 设置默认属性·static
其中static
是默认值,也就是说,如果不设置position属性,则系统会自动采用这种效果,也就是从上往下的正常排列。
<div>
<div style="background: blue; height: 100px"></div>
<div style="background: red; height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
2.2 设置相对定位·relative
相对定位中的相对,指的是相对于默认位置。
可以参照上面那张图,蓝、红、黄、橙四个排列方式就是默认位置,就是没有设置position
时的位置。
而通过设置相对定位可以让元素相对于原来的位置进行移动,同时原来的位置也会空出来,不会被其它元素挤掉。
正确的是有相对定位的方式是,首先声明为positin:relative
,然后通过top
,bottom
,left
,right
进行四个方向的移动。示例如下,
<div>
<div style="position:relative;top:50px;background: blue; height: 100px"></div>
<div style="background: red; height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
如上图所示,整个蓝色区域向下移动了50px,同时原来的位置并没有被占用,会被空出一块。
2.3 设置绝对定位·position
相对定位是相对于原来的位置,而绝对定位则是相对于父元素进行相对定位。
使用方式是,声明position:absolute
,同时使用top
,bottom
,left
,right
向四个方向移动。
<div>
<div style="position:absolute;top:50px;background: blue;width:50px; height: 100px"></div>
<div style="background: red; height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
蓝色方块相对于父元素向下移动了50px。
有没有注意到一点,我为蓝色方块设置了宽度。
如果在绝对定位下,不为元素设置宽度和高度的话,则元素无法显示出来。效果如下,
<div>
<div style="position:absolute;top:50px;background: blue;height: 100px"></div>
<div style="background: red; height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
根据上面的效果,我们设置了蓝色方块,同时设置它的绝对定位,但是依旧看不到有蓝色方块。这是因为没有给他设置宽度,,他就默认为0宽度,所以看不到。这一点一定要注意。因为它已经脱离了默认的布局,所以要给它设置的宽高。
2.4 设置固定定位·fixed
以浏览器为容器进行定位。
具体使用方式是,首先定义position:fixed
,然后通过top
、bottom
、left
、right
进行定位。
实例如下,
<div style="height:1500px;">
<div style="position:fixed;top:50px;right:50px;background: blue;width:100px;height: 100px"></div>
<div style="background: red; height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
可以看到,蓝色小方块相对于浏览器进行定位,并不会随着页面的上下移动而改变位置。
2.5 设置粘性定位·sticky
这个定位很神奇,相当于相对定位和固定定位的总和。
首先会让元素进行正常的排列,当页面下移,会让元素相对于浏览器进行定位。
<div style="height:1500px;">
<div style="background: blue;height: 100px"></div>
<div style="position:sticky;top:0px;background: red;height: 100px"></div>
<div style="background: yellow; height: 100px"></div>
<div style="background: orange; height: 100px"></div>
</div>
就像上面的图片所示,本来红色排在第二块,而在页面向下移动到红色方块时,红色方块也会随着屏幕自动下移。