WEB前端基础知识之CSS页面布局属性

在CSS样式中有一些用于页面布局的属性，熟练的运用这些属性可以让你的页面布局 更加完美。今天小编要说的就是关于标签定位的属性，在没有用可以控制HTML元素位置的CSS渲染的页面中，页面任何一个元素都被原有的文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，使得页面可以按照自己需要的方式布局。

在CSS中样式关于定位的属性是position属性，而该属性有不同的值展现出不同的位置效果，分别有以下几个值。

position属性不同值简介

1. relative相对定位

相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。即如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直（距离顶部top或距离底部bottom）或水平（距离左边left或距离右边right）位置，让这个元素“相对于”它的起点进行移动。

例

selector {position: relative;left: 10px;top: 10px;}

绝对定位与相对定位图解

2. absolute绝对定位

绝对定位的元素框占位从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占会被其它元素代替，切元素定位后生成一个块级框。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。使用position:absolute;,能够很准确的将元素移动到你想要的位置，

例

selector {position:absolute ;left: 10px;top: 10px;}

1. static无定位

position:static是所有元素定位的默认值,一般不用注明，除非有需要取消继承的别的定位。

4. fixed固定定位

定位后元素框的表现类似于将position设置为absolute，不过其包含块（相对于窗口）是视窗本身。

注：使用position定位，通常需要利用top,bottom,left,right4个属性来配合使用，从而确定元素所在的位置。