【css盒子定位】position属性

今天是满满干货,话不多说上知识

定位

定位（position）的基本思想很简单，它允许用户定义元素框相对于其正常位置应该出现的位置，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素生成一个块级框，而不论该元素是什么类型。position属性可以选择4种不同类型的定位模式。

position : static | relative | absolute | fixed

其中参数哈尼如下：

static：静态设定为默认值。为特殊定位，对象遵循HTML定位规则。

relative: 生成相对定位的元素，相对于其正常位置进行定位。

absolute：生成绝对定位元素，元素位置通过left,top,right,bottom 属性进行规定

fixed：生成固定定位，相对于浏览器窗口进行定位。元素的位置通过left,top.right,bottom 属性进行规定

一，静态定位

静态定位是position 属性的默认值，即该元素出现在文档的常规位置，不会重新定位。通常此属性可以不设置，除非是要覆盖以前的定义

二，相对定位

相对定位（position:relative;）指的是通过设置水平垂直位置的值，让这个元素“相对于”它原来的起点进行移动。

注： 即便是将某元素进行相对定位，并赋予新的位置值，元素仍然占据原来的空间位置，移动后会导致覆盖其他元素。

三，绝对定位

用（position:absolute;）表示绝对定位，使用绝对定位的对象可以被放置在文档任何位置，位置依据浏览器左上角的0点开始计算。绝对定位的对象可以层叠，层叠的顺序由z-index控制，z-index值越高位置越靠上。

四，固定定位

固定定位（position:fixed;）其实是绝对定位定位的子类别，一个设置了position:fixed 的元素相对于视窗是固定的，就算页面文档发生了滚动，它也会一直待在相同的地方

CSS

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。