作者有话说:在学定位之前有了解过吗?再没学浮动之前,这些块元素标签会出现在一列,要想实现并排就可以使用浮动float,现在我们可以学习定位,给背景图片或者图片、div、border等添加属性等,有定位在祖先级的、定位在浏览器的,比如说浏览京东页面时,当你拉动网页的时候页面会动,但是会有一个栏目始终保持在那个位置不动,这就是使用的定位,接下来一起看看吧!
定位使用position
static 默认值,没有定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
1.relative相对定位
相对定位:设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置,但是原来的位置会被保留下来,且仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响。
使用相对定位:position: relative;
riht:Npx;//相对原来的位置距离右边移动Npx
left:Mpx;//相对原来的位置距离左边移动Mpx
top:Fpx;//相对原来的位置距离顶部移动Fpx
bottom:Epx;//相对原来的位置距离底部移动Epx
大概图示:
注意:相对自身原来位置进行偏移
2.absolute绝对定位
重点了解:使用绝对定位的时候需要用position: relative;作为absolute的父级定位,因为relative不会让父级脱离文档流 而absolute绝对定位和fixed固定定位会脱离文档流,但是它们对其他元素的定位不会造成影响,并且absolute绝对定位以它最近的一个“已经定位”的“祖先元素”为基准进行偏移,最近的定位包括绝对、相对和固定任何一个。如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位,相对相对在使用定位偏移后依旧保留原来的空位置,但是absolute绝对定位和fixed固定定位元素位置发生偏移后,它原来的位置不会被保留下来。设置了绝对定位但是没有设置偏移量的元素将保持在原来的位置,有时候在网页制作中可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况。
使用绝对定位:首先给父级定位position: relative;
然后使用绝对position: absolute;top:Npx;bottom: Mpx...
大概图示:
3.fixed固定定位
固定定位相对浏览器窗口来定位,偏移量不会随滚动条的移动而移动
固定定位一般使用在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定偏移量。
注意:这个就不是相对于原来位置使用偏移量了,而是根据浏览器窗口设置的位置,
使用固定定位:依旧首先给父级(祖先辈...)定位position: relative;
然后使用绝对position: fixed;top:Npx;bottom: Mpx...
大概图示:
下面是一个页面哦
注释:有人可能不太懂在绝对定位absolate和固定定位fixed中position: relative;的作用,就像你跑步400米一样,首先你得知道自己在哪个操场,确定自己的跑道,才可以对吗!我们这里的偏移量(top:Npx;bottom: Mpx...)就是规定你是跑400米还是800米,position: relative;就是确定你的跑道。那么哪个是你呢?需要定位的div或者img就是你啦。固定的跑道就是使用的绝对定位,跑道上教官就是固定定位,即使所有人都在移动,教官也不用跑就在固定的位置计时就可以了。哈哈不知道有没有了解一点呢?
如果觉得《定位:relative相对定位 absolute绝对定位 fixed固定定位》对你有帮助,请点赞、收藏,并留下你的观点哦!