再談position與float的用法

Posted on Edited on In Views: Disqus:

 

一、position

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .menu {
            /*position: absolute;*/
            float:left;
        }

        .color, .cover {
            position: absolute;
        }

        .color {
            color: rgb(14,243,208);
        }

        .cover {
            color: #F223D7;
        }

        #menu1 {
        }

        #menu2 {
            margin:10% 0 0 0;
            /*top: 10%;*/
        }

        #menu3 {
            margin:20% 0 0 0;
            /*top: 20%;*/
        }
    </style>
    <title>JS Bin</title>
</head>
<body>
    <div id="main_nav">
        <div class="menu1 menu" id="menu1">
            <div class="cover">
                <span>aaa_cover</span>
            </div>
            <div class="color">
                <span>aaa_color</span>
            </div>
        </div>
        <div class="menu2 menu" id="menu2">
            <div class="cover">
                <span>bbb_cover</span>
            </div>
            <div class="color">
                <span>bbb_color</span>
            </div>
        </div>
        <div class="menu3 menu" id="menu3">
            <div class="cover">
                <span>ccc_cover</span>
            </div>
            <div class="color">
                <span>ccc_color</span>
            </div>
        </div>
    </div>
</body>
</html>

範例說明：

子層已指定absolute屬性的元素，父層使用margin會發生不正常疊加；

如果父層也指定absolute屬性，則父層可以使用top。

子層已指定absolute屬性的元素，父層使用float讓各個父元素獨立地浮架起來，

父層可個別使用margin不會有疊加效果。

額外重點：

1、當position被指定成absolute時，則位置會以最父層為基準，

而不用理會兄弟層元素位置順序， 如果父層沒有使用border或指定高度時，

則父層底下的子層的高度會被視為零，

當有多組父層時因子層的高度為零而變成所有子層都會堆疊到第一組父層的地方。

2、而父層可配合float屬性來浮架起各父層，來避免底下所有兄弟層都黏在一起。

3、當position被指定成absolute時，則p元素會變成行內元素。

4、當position:absolute時，則vertical-align: baseline;沒有效果。

 

二、float

1、如果兩兩行內元素的寬度未達父層的100%而同在一列裡的時候，

被指定float:left的元素會先靠左排列並且兩高度略有不齊現象；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        span {
            border: red solid 1px;
        }

        #b {
            float: left;
        }
    </style>
</head>
<body>
    <span id="a">aaa</span>
    <span id="b">bbb</span>
    <span id="c">ccc</span>
</body>
</html>

 

2.1、n個塊狀元素在同一父層底下，

被指定float:left的元素會表現成inline樣式，並靠左排列，還會影響下一個塊狀元素，

使其排列於後。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        p {
            border: red solid 1px;
            margin: 0;
        }

        #b {
            float: left;
        }
    </style>
</head>
<body>
    <p id="a">aaa</p>
    <p id="b">bbb</p>
    <p id="c">ccc</p>
    <p id="d">ddd</p>
    <p id="e">eee</p>
</body>
</html>

 

2.2、n個塊狀元素在同一父層底下，

被指定float:left的元素會表現成inline樣式，並靠左排列，

若各元素有設margin時，則會有不一樣的排列方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        p {
            border: red solid 1px;
        }

        #b {
            float: left;
        }
    </style>
</head>
<body>
    <p id="a">aaa</p>
    <p id="b">bbb</p>
    <p id="c">ccc</p>
    <p id="d">ddd</p>
    <p id="e">eee</p>
</body>
</html>