相对定位与绝对定位

绝对定位:

　　设置为绝对定位的元素会脱离文档流，并相对于其最近的已定位的祖先元素定位，并且元素定位以后会变成一个块级框，例如：

<style>
    i{
        width:100px;
        height: 100px;
        background: red;
        margin: 300px auto;
    }
</style>
<i>HIHA</i>

i标签本来是行内元素，这段代码的运行结果：

其宽高完全由其内的文字‘HIHA’撑起来的，跟咱们定义的样式，width、height无关，并且margin在竖直方向上无效（应为i是行内元素），但是将上面代码改成：

<style>
    i{
        position: absolute;
        width:100px;
        height: 100px;
        background: red;
        margin: 300px auto;
    }
</style>
<i>HIHA</i>

运行结果就变为了：

Margin和width、height都起了作用，说明其已经变为了块级元素。

另外，因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以通过z-index属性来控制这些框的堆放次序。

 

相对定位：

如果对一个元素进行相对定位，它将出现在它所在的位置上，换句话说，原来是哪儿，还是哪儿，可以通过设置垂直或水平位置，让这个元素相对于它自己的起点进行移动，其本身还在文档普通流，例如，上例改为：

<style>
    i{
        position: relative;
        width:100px;
        height: 100px;
        background: red;
        margin: 300px auto;
    }
</style>
<i>HIHA</i>

运行结果为：

说明这时的i标签还是普通的行内元素，并未发生本质的改变。

 

 

另附：行内元素与块级元素的区别：

1、  块级元素独占一行，且其宽度默认情况下会占满其父元素的宽度，行内元素不会独占一行，其相邻元素可以排在一行

2、  块级元素可以设置width，height，行内元素设置width、height无效，而且块级元素即使设置宽度也还是独占一行。

3、  块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如，margin-top/bottom，padding-top/bottom，不会产生边距效果。

4、  块级元素和行内元素的相关属性：display，

其中块级元素对应display：block,行内元素对应display：inline。

补充说明：display：inline-block，可以让元素具有块级元素和行内元素的特性，既可以设置长宽，可以让padding和margin生效，有可以和其他行内元素并排，是一个很实用的属性。

 

行内元素变为块级元素的方法：

         1、Display：block；2、浮动行内元素；3，绝对定位行内元素；