最近这两天一直在学习，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。并且拖动滚动条时位置固定不变。
网友评论