Web前端之CSS——CSS定位

传统的页面布局主要由display属性和position来控制，今天学习下CSS定位的相关内容。

1.position取值

relative	相对于自身原本的位置进行偏移，不脱离文档流，原来的位置还保持
absolute	相对于最近的不为static的父元素进行偏移，脱离文档流，原来的位置被其他元素填充
static	元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
fixed	固定定位，偏移方式和absolute类似，但是以window窗口为准

 

 

 

 

2.详细解读

相对定位

relative，相对于自身原本位置进行偏移，不偏离文档流。

不设置宽高的情况下，宽度继承父div，高度看内部的内容。

    <!-- 子元素是相对定位，不脱离文档流，会撑开父元素 -->
    <style type="text/css">
        .parent {
            position: relative;
            height: 100%;
            background: red;
        }
        .child {
            position: relative;
            width: 100%;
            height: 300px;
            background: green;
        }
    </style>
    <div class="wrapper">
        <div class="parent">
            <span>品品</span>
            <div class="child">
                <p>品品品</p>
            </div>
        </div>
    </div>

 

绝对定位

 absolute，相对最近的不为static的父元素进行偏移，元素会脱离文档流，原来的位置被其他元素填充，不会撑开父元素。

    <!-- 子元素是绝对定位，脱离文档流，不会撑开父元素 -->
    <style type="text/css">
        .parent {
            position: relative;
            height: 100%;
            background: red;
        }
        .child {
            position: absolute;
            width: 100%;
            height: 300px;
            background: green;
        }
    </style>
    <div class="wrapper">
        <div class="parent">
            <span>品品</span>
            <div class="child">
                <p>品品品</p>
            </div>
        </div>
    </div>

 

默认定位

static，元素的默认位置，不做偏移

固定定位

fixed，可以看做独特的绝对定位，只不过相对于窗口偏移，会脱离文档流。

 

附：div的width、heigth设置为0时，div的表现是不展示，但是如果里面有内容的话，内容可以正常显示。