CSS定位：relative相对定位、absolute绝对定位、fixed固定定位

作者有话说:在学定位之前有了解过吗?再没学浮动之前?这些块元素标签会出现在一列?要想实现并排就可以使用浮动float?现在我们可以学习定位?给背景图片或者图片、div、border等添加属性等?有定位在祖先级的、定位在浏览器的?比如说浏览京东页面时?当你拉动网页的时候页面会动?但是会有一个栏目始终保持在那个位置不动?这就是使用的定位?接下来一起看看吧?

定位使用position

static 默认值?没有定位

relative 相对定位

absolute 绝对定位

fixed 固定定位 1.relative相对定位

相对定位?设置相对定位的盒子会相对它原来的位置?通过指定偏移?到达新的位置?但是原来的位置会被保留下来?且仍在标准文档流中?它对父级盒子和相邻的盒子都没有任何影响。

使用相对定位?position: relative;

riht:Npx; //相对原来的位置距离右边移动Npx

left:Mpx; //相对原来的位置距离左边移动Mpx

top:Fpx; //相对原来的位置距离顶部移动Fpx

bottom:Epx; //相对原来的位置距离底部移动Epx

大概图示?

重点了解=使用绝对定位的时候需要用position: relative;作为absolute的父级定位=因为relative不会让父级脱离文档流 而absolute绝对定位和fixed固定定位会脱离文档流=但是它们对其他元素的定位不会造成影响=并且absolute绝对定位以它最近的一个“已经定位”的“祖先元素”为基准进行偏移=最近的定位包括绝对、相对和固定任何一个。如果没有已经定位的祖先元素=会以浏览器窗口为基准进行定位=相对相对在使用定位偏移后依旧保留原来的空位置=但是absolute绝对定位和fixed固定定位元素位置发生偏移后=它原来的位置不会被保留下来。设置了绝对定位但是没有设置偏移量的元素将保持在原来的位置=有时候在网页制作中可以用于需要使某个元素脱离标准流=而仍然希望它保持在原来的位置的情况。

使用绝对定位=首先给父级定位position: relative;

然后使用绝对position: absolute; top=Npx=bottom: Mpx...

大概图示=

固定定位相对浏览器窗口来定位=偏移量不会随滚动条的移动而移动

固定定位一般使用在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

元素的位置通过 "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就是你啦。固定的跑道就是使用的绝对定位=跑道上教官就是固定定位=即使所有人都在移动=教官也不用跑就在固定的位置计时就可以了。哈哈不知道有没有了解一点呢