CSS 三种定位方式

１、相对定位

　　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

<html>
<head>
<style type="text/css">
    .box1{
        background-color: red;
        width:100px;
        height:100px;
    }
    .box2{
        background-color: yellow;
        width:100px;
        height:100px;
        position: relative;
        left: 20px;
        top:10px;
    }
    .box3{
        background-color: blue;
        width:100px;
        height:100px;
        position: relative;
        right: 20px;

    }
</style>
</head>

<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>

</html>

２、绝对定位
　　相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 200px;
    height: 200px;
    background: yellow;

}
#div2 {
    width: 50%;
    height: 50%;
    background: red;
    top: 100px;
    left: 100px;
    position: absolute;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

三、浮动

浮动的框可以在左右移动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘。浮动的框脱离普通流。
　　如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动块向下移动，直到有足够多的空间。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素卡住。
　　行内元素会围绕着浮动框排列。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

CSS 三种定位方式

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

CSS 三种定位方式

消除浮动？

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。比如下面指的是假设两边float:none

.text_line
{
    clear:both;
}

秒客网

CSS 三种定位方式

相关文章