Html CSS学习（五）position定位

Html CSS学习（五）position定位

position用来对元素进行定位，其值有如下几种：

• static：无特殊定位，对象遵循正常文档流，top，right，bottom，left等属性不会被应用。
• relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
• absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠经过z-index属性定义。
• fixe：对象脱离正常文档流，使用top，right，botton，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

1、static定位

页面代码以下：

<div class="father">
        <div class="children">
            子容器1
        </div>
        <div class="children">
            子容器2
        </div>
    </div>

CSS代码以下：

<style>
        .father{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
        .children{
            margin: 10px;
            width: 150px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>

页面效果以下：

从上面页面的结果能够看出，Html文档流默认的定位便是static，元素按照其默认的规则进行定位。

2、relative定位

下面，首先修改第一个子容器，将其position更改成relative,并设置其top，left属性。

CSS样式设置以下：

.father div:first-child{
            position: relative;
            top: 30px;
            left: 30px;
        }

页面效果以下：

从上图能够看出，relative，仍然遵循正常的文档流，因此它的位置依然保留，可是它会依照top，left，bottom，right等属性，相对于其原来的位置进行偏移。

3、absolute定位

若是将子容器1的定位更改成absolute，则页面效果以下：

从中能够看出，它再也不遵循正常的文档流，其原始位置被占据。它是绝对定位，它以浏览器的左上角为参照点进行定位。而relative是相对定位，它是相对于其自身的原始位置进行定位，也就是说，它以没有使用relative定位时的位置左上角为参照点进行定位。

4、fixed

对象将脱离正常的文档流，它能浏览器窗口左上角为参考点进行定位，而且若是页面出现滚动条时，它并不会随滚动条的移动而滚动，它始终以浏览器窗口左上角为参考点进行定位，与其父容器无关。经常使用于制做固定导航条等内容。