金魚都能懂的網頁設計入門-Absolute絕對定位

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第十五天 - Absolute絕對定位

Absolute 絕對定位原理:

特性： 當你將物件做絕對定位時，第一件事它就會將物件從資料中抽掉，原理跟 fixed 非當相似。
例如 a>b>c : 如果將 c 做absolute 絕對定位，
那麼 b就不知邊c 的位置在那裹，其實c 就在原本資料所在的位置，只是c被抽離， b就無法包覆它。

  • 還未做absolute 絕對定位時:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> 絕對定位 absolute
        </title>
        <style type="text/css">
            div{
                padding:40px;
                border: 6px solid #f00;
                font-size: 24px;
            }
            .c{
                /* position: absolute; */
                /* c做了絕對定位之後，b 不知道 c在那裹，c 會在原本資料所在的位置 */
                /* 現在設定 left:0 top:0 ,它會定到那裹去? 這時它會往上找父層有沒有定位，找到有定位的父層為止，如果 html body div a div b , 都沒有定位，它最後會定在視窗window上 */
                /*而且它只會定位一次*/
                left:0;
                bottom: 0;
                border-color:#00f;
            }
            /* 如果定到 body身上，因為body 會被撐開，如果設定 bottom:0 ,則會定到body的最下方 */
            body{
                position: relative;
            }
            /* 也可以定到 html上 */
            /* html{
                position: relative;
            } */
        </style>
    </head>
    <body>
        <!-- 當把物件設定為絕對定位時，它會將這個物件會從資料當中抽掉，原理跟 fixed 非常相像 -->
        <div class="a">a
            <div class="b">b
                <div class="c">c
                </div>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti doloremque reprehenderit dolore est expedita atque illo, a quam itaque quaerat!</p>
        <p>Dolorum numquam cupiditate natus unde amet quaerat quia eaque, corrupti quae earum modi vero impedit facilis, illo veniam consequuntur odit.</p>
        <p>Consequuntur nisi voluptatem temporibus ex assumenda quas sunt optio repellendus blanditiis nam architecto, inventore saepe quisquam rerum pariatur vel quibusdam?</p>
        <p>Est ab quas, earum accusamus aliquid voluptas aliquam, distinctio soluta, facilis sequi deserunt at! Deleniti labore perferendis molestias nihil modi.</p>
        <p>Perspiciatis at, temporibus vero aliquam, eveniet tenetur ad rerum deleniti molestiae quidem, voluptatem ducimus! Soluta accusamus illum sed repellendus? Voluptatum?</p>
        <p>Dolore corporis, natus tenetur, ipsa, sed aspernatur tempora commodi modi dignissimos et voluptatem beatae. Amet ea alias quibusdam? Iusto, suscipit?</p>
        <p>Ad ipsam soluta repellat minus aspernatur cupiditate, autem, quaerat quisquam magnam, voluptate neque cum asperiores inventore! Minus deleniti officia earum.</p>
        <p>Placeat aperiam odio quam quibusdam nesciunt, quos sapiente quisquam illo porro, ducimus, id eveniet commodi laudantium sit ut dolore magni.</p>
        <p>Doloribus velit, iure commodi ullam fugiat laborum inventore nisi consectetur consequatur porro ipsa modi amet ut itaque est tempore aspernatur?</p>
        <p>Expedita ipsum repellendus vitae quibusdam, eveniet necessitatibus consectetur nulla molestiae incidunt dignissimos? Minus natus impedit eius nisi nostrum illum! Cupiditate.</p>
        <p>Labore distinctio enim asperiores deleniti natus accusamus sed incidunt repellat, hic ducimus earum aperiam voluptates magnam ut, ratione in voluptas.</p>
        <p>Doloribus facere soluta, reiciendis numquam rem corporis maxime. At, veniam expedita. Voluptatum iusto quasi repellat minus fuga natus quam aliquam.</p>
        <p>Iusto aut, consequatur nemo fuga, incidunt animi reprehenderit nihil consequuntur nisi tempore excepturi? Necessitatibus blanditiis iste inventore sapiente quasi animi.</p>
        <p>Laudantium inventore sed quia saepe? Exercitationem, sint. Aliquam voluptate porro error eaque dolore. Numquam laborum obcaecati tempore, minus sapiente iste.</p>
        <p>Sint, magnam veritatis quod, tenetur nesciunt rerum dolorum minus fugiat assumenda voluptatem enim mollitia debitis quo, voluptatibus repellendus laboriosam distinctio.</p>
        <p>Pariatur doloribus hic fugiat voluptas, placeat assumenda tenetur dolore qui ipsam labore, accusamus quas. Totam perferendis quidem deserunt vitae suscipit.</p>
        <p>Obcaecati tempore earum facilis perferendis, vitae voluptatum error vero assumenda eius distinctio culpa expedita, alias, ab nam suscipit praesentium ipsum?</p>
        <p>Consectetur a voluptas nihil enim quibusdam adipisci nesciunt soluta harum natus aspernatur. Aliquam beatae quisquam minus earum asperiores? Alias, accusantium.</p>
        <p>Facilis ex maxime tempore itaque voluptatibus debitis temporibus magnam sint exercitationem, at ad maiores ipsam, praesentium nemo consectetur nulla quis!</p>
        <p>Quam iste eius reiciendis, labore error et numquam sapiente, quae exercitationem nam voluptas dolor itaque eum. Placeat nobis magnam non?</p>
        <p>Ullam fugiat veniam quia molestias earum itaque neque? Numquam sit excepturi autem impedit provident recusandae a iste laudantium alias in.</p>
        <p>Nisi tempore minima quo nam ab cum hic illo, unde quaerat dolor ipsa vel similique, libero culpa sint optio! Animi.</p>
        <p>Velit numquam nam, accusamus eveniet sequi, excepturi similique corrupti, quam ut harum in rerum magnam totam atque quaerat! Animi, corrupti.</p>
        <p>Totam sit ratione ad! Eos cum temporibus, harum esse, tempora corporis maiores deleniti neque laborum commodi, atque incidunt unde ipsa.</p>
        <p>Totam veniam fuga debitis, provident soluta amet voluptate, perferendis unde, veritatis commodi dolores! Voluptas mollitia quo recusandae voluptatibus, quis ex.</p>
        <p>Voluptas illum incidunt possimus voluptates dolorem aut ipsa iste ducimus maxime, nihil natus culpa hic repudiandae ex explicabo. Nam, ipsa.</p>
        <p>Velit, voluptas omnis debitis illum consequuntur fugit ab eveniet. Veniam inventore numquam dignissimos laboriosam facilis eaque dolores iusto at provident!</p>
        <p>Nulla eum quam blanditiis impedit molestias perspiciatis exercitationem cumque, veritatis, inventore autem, voluptatem explicabo saepe velit voluptate enim quaerat earum.</p>
        <p>Cupiditate modi soluta eius voluptatum, autem saepe quo impedit iure dolores rem, cumque magnam! Quis architecto cum illo omnis recusandae!</p>
        <p>Libero error dicta, doloribus perspiciatis veniam quis, at numquam ipsam eum odit reprehenderit recusandae praesentium ex inventore consequatur similique facilis.</p>
    </body>
    </html>

  • 當c做absolute 絕對定位後:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style type="text/css">
         div{
             padding:40px;
             border: 6px solid #f00;
             font-size: 24px;
         }
         .c{
             position: absolute;
             /* c做了絕對定位之後，b 不知道 c在那裹，c 會在原本資料所在的位置 */
             /* 現在設定 left:0 top:0 ,它會定到那裹去? 這時它會往上找父層有沒有定位，找到有定位的父層為止，如果 html body div a div b , 都沒有定位，它最後會定在視窗window上 */
             /*而且它只會定位一次*/
             /* left:0;
             bottom: 0; */
             border-color:#00f;
         }

  • 如果 c 做了絕對定位之後，並設定 left:0 ,
    它就會往父層找看有沒有 定位(fixed relative absolute) ,
    以此例，它的父層 div b div a body html 都沒有，
    最後就會定在視窗window上,而且只會定位一次。
    只要父層有定位，就會定在最近的那一層父層上.
    以此為例： 就會定在視窗window上

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style type="text/css">
            div{
                padding:40px;
                border: 6px solid #f00;
                font-size: 24px;
            }
            .c{
                position: absolute;
                /* c做了絕對定位之後，b 不知道 c在那裹，c 會在原本資料所在的位置 */
                /* 現在設定 left:0 top:0 ,它會定到那裹去? 這時它會往上找父層有沒有定位，找到有定位的父層為止，如果 html body div a div b , 都沒有定位，它最後會定在視窗window上 */
                /*而且它只會定位一次*/
                left:0;
                /* bottom: 0; */
                border-color:#00f;
                padding: 20px;
            }
            /* 如果定到 body身上，因為body 會被撐開，如果設定 bottom:0 ,則會定到body的最下方 */
            /* body{
                position: relative;
            } */
            /* 也可以定到 html上 */
            /* html{
                position: relative;
            } */
        </style>

  • 如果 a 及 b 都做了相對定位 relative 之後 , c 只會定在 b的裹面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <style type="text/css">
            div{
                padding:40px;
                border: 6px solid #f00;
                font-size: 24px;
            }
            .a{position:relative}
            .b{position:relative}
            .c{
                position: absolute;
                /* c做了絕對定位之後，b 不知道 c在那裹，c 會在原本資料所在的位置 */
                /* 現在設定 left:0 top:0 ,它會定到那裹去? 這時它會往上找父層有沒有定位，找到有定位的父層為止，如果 html body div a div b , 都沒有定位，它最後會定在視窗window上 */
                /*而且它只會定位一次*/
                left:0;
                bottom: 0;
                border-color:#00f;
                padding: 5px;
            }
            /* 如果定到 body身上，因為body 會被撐開，如果設定 bottom:0 ,則會定到body的最下方 */
            body{
                position: relative;
            }
            /* 也可以定到 html上 */
            /* html{
                position: relative;
            } */
        </style>

-如果把 a 及 b 的相對定位拿掉，則會定在視窗上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style type="text/css">
        div{
            padding:40px;
            border: 6px solid #f00;
            font-size: 24px;
        }
        /* .a{position:relative}
        .b{position:relative} */
        .c{
            position: absolute;
            /* c做了絕對定位之後，b 不知道 c在那裹，c 會在原本資料所在的位置 */
            /* 現在設定 left:0 top:0 ,它會定到那裹去? 這時它會往上找父層有沒有定位，找到有定位的父層為止，如果 html body div a div b , 都沒有定位，它最後會定在視窗window上 */
            /*而且它只會定位一次*/
            left:0;
            bottom:0;
            border-color:#00f;
            padding: 5px;
        }
        /* 如果定到 body身上，因為body 會被撐開，如果設定 bottom:0 ,則會定到body的最下方 */
        /* body{
            position: relative;
        } */
        /* 也可以定到 html上 */
        /* html{
            position: relative;
        } */
    </style>

  • 使用時機: 購物網站圖片 右上方 熱賣hot 標籤的效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>絕對定位 absolute 試範</title>
    </head>
    <link rel="stylesheet" href="./reset.css">
    <style type="text/css">
        .wrap{
            width: 960px;
            margin: auto;
            display: flex;
        }
        .item{
            position: relative;
            width:300px;
            margin: 15px 10px;
            border: 1px solid #aaa;
            padding: 10px; /*線條跟邊框連起來不太好看，設定一下 padding*/
        }
        /* 布望圖片大小都一樣，設定 width: 100% */
        .item img{
            width: 100%;
        }
        .item .tab{
            background-color: #f00;
            color:#fff;
            padding: 6px 10px;
            position: absolute;
            /* 但父層沒有做定位時，畫面會壞掉，它會定到 window去，所以父層要設定位，因為圖片是要和大家排在一起，不要獨立出去，所以父層item 的定位設定 relative */
            top: -4px; 
            right:-4px;
            border-radius: 5px;
            transform: rotate(45deg); /* 旋转 45 度 */

         
        }
    </style>
    <body>
        <!-- 購物網站 ，有熱賣小小圖案的效果 -->
        <div class="wrap">
            <div class="item">
                <div class="tab">Hot</div>
                <img src="https://picsum.photos/300/200/?random=1">
                <h2>title</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, maxime?</p>

            </div>
            <div class="item">
                <div class="tab">Hot</div>
                <img src="https://picsum.photos/300/200/?random=2">
                <h2>title</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, maxime?</p>

            </div>
            <div class="item">
                <div class="tab">Hot</div>
                <img src="https://picsum.photos/300/200/?random=3">
                <h2>title</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, maxime?</p>

            </div>
        </div>
    </body>
    </html>

  • 也常常應用在蓋版廣告的 X 關閉按鈕的位置.

文獻連結:
金魚都能懂的網頁設計入門-第十五天 - Absolute絕對定位
https://www.youtube.com/watch?v=JOdZdHnuGmM&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=15 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos