最近这两天一直在学习,psition定位。不是太理解,思路有些乱,有些懵逼。今天,在网上也查了下,然后自己梳理了一下,然后对这个定位也是了解清晰了一些吧,也知道说什么样的是绝对定位相对定位,设置之后会有什么效果,然后今天我把这东西大概先梳理出来,然后记记录一下,也是对自己的记忆有帮助的,下来之后如果发现,有什么不对的地方,然后再来修改。
首先是网页的布局模型吧,大概是分为三种
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
那么第一种就是流动模型,流动模型就是页面默认模型,他从上到下,从左到右,按照这样一个顺序来把页面上的元素依次显示出来。
那么第二种就是浮动模型,像正常的盒模型,块状元素都单独占一行的,但是我们可以通过浮动属性,把他漂浮起来,多个元素显示在同一行,还可以通过浮动给一些元素来做一个简单的一个定位,这都是可以的。
那么我们刚刚说到这个定位,他就是属于是第三种层模型,层布局模型就相当于photoshop图层编辑功能,针对每个图层来进行定位,天天玩也是那南宫云网页大小的活动性,所以层布局模型,没有受到热捧。嗯,但是在网页的局部定为当中还是需要用层布局模型的。
定位position,应该是可以分为四种吧,比如一种是默认的,流式布局,第二种就是相对定位relative,第三种是绝对定位absolute,还有一种是固定定位fixed。
绝对定位absolute,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。 在绝对定位当中,如果他的父元素设置了绝对定位或者相对定位的话,那它应该就是会根据它的父元素来定位,如果没有父元素设置任何定位,会根据父元素来定位。
相对定位relative,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。