position定位的理解

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,357评论 0 5
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,019评论 0 1
  • 1.CSS盒模型 盒子模型有两种,分别是标准盒子模型和IE盒子模型。 CSS 把盒模型分为两种基本形态:Block...
    莫失丿莫忘阅读 3,607评论 0 2
  • 从2003年底写下第一首真正意义的诗歌《爱,也是一道风景》开始,转眼间我已在文学路上摸爬滚打14载了。 我广...
    苏伦_阅读 4,174评论 6 16

友情链接更多精彩内容