重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS的position属性怎么控制页面布局
这篇文章主要讲解了“CSS的position属性怎么控制页面布局”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS的position属性怎么控制页面布局”吧！
为商水等地区用户提供了全套网页设计制作服务，及商水网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、商水网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
本文主要详细讨论 position 属性的前三个值，首先大概讲解下后两个值：
static
static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。
inherit
inherit 值如同其他 css 属性的 inherit 值，即继承父元素的 position 值。
absolute
absolute 元素将会脱离正常的文档流，所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。
这个绝对定位需要稍微理解下，因为这里容易与 relative 产生混淆。
例如，当对 absolute 元素添加 left:10px 定位后，这个 left 究竟是对哪个元素而言呢？其实，此时将会往上查找 absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left:10px 就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。
CSS Code复制内容到剪贴板
Im a default element
//直接忽略 absolute 元素的存在
relative
relative 元素遵循正常的文档流，所以周围元素不会忽略它的存在，relative 元素同样支持 top,bottom,left,right 等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于， relative 元素周围的元素将会忽略 relative 元素的移动。我们注意，当 relative 元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略 relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动，我们用个例子来说明：
CSS Code复制内容到剪贴板
Im a default element
//并未忽略 relative 元素的存在
全选复制放进笔记
CSS Code复制内容到剪贴板
//忽略了 relative 元素的移动
//如同 absolute，fixed元素也被周围元素忽略
//只有 fixed 元素未因为屏幕滚动而消失，因为它是“固定”的
//fixed 元素 z-index 比 absoulute 元素高，所以显示在前面
//z-index 值相同，仍然显示为 fixed 元素