css之定位-css教學-PHP中文網

首頁

web前端

css教學

css之定位

高洛峰

Oct 09, 2016 pm 03:22 PM

定位有三種，分別是相對定位 position:relative; 、絕對定位 position:absolute; 、固定定位 position:fixed;

相對定位

相對定位，就是微調元素位置的，讓元素相對自己原來的位置，自己原來的位置，自己原來的位置進行位置調整。也就是說，如果一個盒子想進行位置調整，那麼就要使用相對定位

css之定位

不脫標，原來的位置還佔著，形影分離

相對定位不脫標，真實位置是定位在原來位置，只不過是影子出去了，可以到處飄。

css之定位

相對定位用途

相對定位有坑，所以一般不用於做「壓蓋」效果。頁面中，效果極小。就兩個作用：

1）微調元素

2）做絕對定位的參考，子絕父相

可以用left、right來描述盒子右、左的移動；可以用top、bottom來描述盒子的下、上的移動。

css之定位

實現上圖的方法：

方法1：
position:relative;
top:100px;
left:200px;

方法2：
position:relative;
bottom:-100px;
right:-200px;

方法3：
position:relative;
top:100px;
right:-200px;

方法4：
position:relative;
bottom:-100px;
left:200px;

登入後複製

絕對定位

絕對定位比相對定位更靈活

css之定位

絕對定位脫標的標準更靈活

絕對定位脫標的標準。所以，所有的標準文檔流的性質，絕對定位之後都不遵守了。絕對定位之後，標籤就不區分所謂的行內元素、區塊級元素了，不需要display:block;就可以設定寬、高了。

參考點

css之定位絕對定位的參考點，如果用top描述，那麼定位參考點就是頁面的左上角，而不是瀏覽器的左上角：

css之定位如果用bottom描述，那麼就是瀏覽器首描述螢幕視窗尺寸，對應的頁面的左下角：

以盒子為參考點

css之定位一個絕對定位的元素，如果父輩元素中出現了也定位了的元素，那麼將以父輩這個元素，為參考點。

要聽最近的已經定位的祖先元素的，不一定是父親，可能是爺爺：🎜

<div class="box1">      →  相对定位
        <div class="box2">  →  没有定位
            <p></p>         → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
        </div>
    </div>

    <div class="box1">      →  相对定位
        <div class="box2">  → 相对定位
            <p></p>         → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
        </div>
    </div>

登入後複製

🎜不一定是相對定位，任何定位，都可以作為參考點🎜

<div>  → 绝对定位        <p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。</div>

登入後複製

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

<div class=”box1”>          → 绝对定位
    <div class=”box2”>      → 相对定位
        <div class=”box3”>  → 没有定位
            <p></p>         → 绝对定位，以box2为参考定位。
        </div>
    </div>
</div>

登入後複製

绝对定位的儿子，无视参考的那个盒子的padding。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 100px;
            padding-top: 150px;
            position: relative;
            margin: 100px;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 40px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div>
        字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字
        <p></p>
    </div>
</body>
</html>

登入後複製

css之定位

绝对定位的盒子居中

绝对定位之后，所有标准流的规则，都不适用了。所以 margin:0 auto; 失效。绝对定位的盒子居中，只需 left:50%; margin-left: 负的宽度的一半。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 400px;
            height: 60px;
            background-color: green;
            position: absolute;
            left: 50%;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

登入後複製

固定定位

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变，固定定位脱标。

css之定位