金魚系列、定位篇

#position

Posted by s103071049 on 2021-06-13

定位大致分成五種，最重要的為以下三種。

定位也就是控制物件在畫面當中，依據誰做對齊，或者說要依據誰做位置的排列或定在某個位置上面。

做了定位，left、top、bottom、right，才會有作用。

有定位，先後順序上會有優先權。有定位它的 z-index 會比較在前方。若兩個都有定位，在原始碼後方的物件會蓋住前方的物件。若只有一個有定位，有定位的物件會蓋住沒定位的物件。

    .item6 {
      background: red;
      position: relative;
      opacity: 0.4;
      left: 50px;
      z-index: 1;
    }
    .item7 {
      position: relative;
    }

Fixed

position: fixed; 會直接在位置中把空間抽調，會獨立一層。捲動時，原本距離視窗頂端多遠，就會保持多遠。

應用：app 廣告、選單、導覽列、logo、back-to-top

特性：

  1. 從資料當中抽離 => 自己獨立一層 => 蓋住其他東西
  2. 未設定上、右、下、左 => 定在原來物件距離視窗頂端、距離視窗左側預設的位置，也就是資料原本的位置
  3. 依據視窗做定位，所以永遠固定在視窗位置中

範例：

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .amos {
      width: 200px;
      height: 100px;
      background: #aaa;
      position: fixed;
      opacity: 0.6; /*設定屬性的透明效果，完全不透明 1 ，透明 0*/
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <div class='amos'>amos</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</body>
</html>

製作蓋版廣告，需要搭配 js

    .amos {
      width: 400px;
      height: 400px;
      background: #aaa;
      position: fixed;
      opacity: 0.6; /*設定屬性的透明效果，完全不透明 1 ，透明 0*/
      /*垂直置中*/
      top: 0;
      bottom: 0;
      margin: auto;
      left: 0;
      right: 0;
    }

製作 nav bar

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <style>
    body {
      padding-top: 40px;
    }
    nav {
      background: black;
      /*文字置中*/
      text-align: center;
      opacity: 0.1;
      /*position*/
      position: fixed;
      width: 100%;
      /*fix 可以對齊上方、左側 0 的位置*/
      top: 0;
      left: 0;
    }
    nav a{
      color: white;
      text-decoration: none;
      display: inline-block;
      padding: 10px 20px;
    }

    .container {
      width: 100%;
      max-width: 960px;
      /*置中對齊*/
      margin: 0 auto;
    }
    .container p{
      margin-bottom: 2em;
      line-height: 1.5em;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
  <!--將段落內容放在 div 內-->
  <div class='container'>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>


</body>
</html>

Relative

相對於自己在資料中的位置去做偏移。所以當我沒有做任何偏移，就不會有任何效果。區塊所佔據的空間沒有改變，但畫面已經顯示到其他地方去了。不做任何偏移，畫面不受影響。

重點：

  1. 相對定位可以當作偏移顯示理解
  2. z-index 與相對定位搭配，決定順序調整
  3. 不會從資料中抽掉
  4. (1+3) => 不做任何改變用相對定位是沒有效果的
<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <style>
    ul {
      font-size: 0;
    }
    li {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: #aaa;
      margin: 10px;
      height: 100px;
      font-size: 50px;
      text-align: center;
      line-height: 100px
    }
    .item6 {
      background: red;
      position: relative;
      opacity: 0.4;
      left: 120px;
      z-index: 1;
    }
    .item7 {
      position: relative;
      left: -120px;
    }
  </style>
</head>
<body>
  <ul>
    <li class='item'>1</li>
    <li class='item'>2</li>
    <li class='item'>3</li>
    <li class='item'>4</li>
    <li class='item'>5</li>
    <li class='item6'>6</li>
    <li class='item7'>7</li>
    <li class='item'>8</li>
    <li class='item'>9</li>
    <li class='item10'>10</li>
    <li class='item'>11</li>
    <li class='item'>12</li>
    <li class='item'>13</li>
    <li class='item'>14</li>
    <li class='item'>15</li>
    <li class='item'>16</li>
    <li class='item'>17</li>
    <li class='item'>18</li>
    <li class='item'>19</li>
    <li class='item'>20</li>
  </ul>
</body>
</html>

Absolute

對物件做絕對定位，物件會因為絕對定位而從資料中抽掉，物件所在的位置會是我原本資料的位置。

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
  div {
    padding: 40px;
    border: 6px solid red;
    font-size: 24px;
  }
  .c {
    position: absolute;
  }
  </style>
</head>
<div class='a'>a
  <div class='b'>b
    <div class='c'>c</div>
  </div>
</div>
</body>
</html>

現在對絕對定位的物件設定 left:0 bottom:0，被定位的物件會往上層找，一路找，找到第一個有定位(absoulte/relative/fix)的物件。以代碼為例，c 往上層找，找到 b 但 b 沒有定位，所以再往上層找，找到 a 但 a 也沒有定位，再往上層找.......，找到視窗。

父層只要有以下三個定位(absoulte/relative/fix)，就會定在他們身上

  .c {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }

  .a {
    position: relative;
  }
  .c {
    position: absolute;
    right: 0px;
    bottom: 0px;
    border-color: blue;
    padding: 20px;
  }

範例

<!DOCTYPE html>
<html>
<head>
  <title>css</title>
  <meta charset="urf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="reset.css">

  <style>
    .wrap {
      width: 100%;
      max-width: 960px;
      margin: auto;
      display: flex;
    }
    .item {
      width: 300px;
      margin: 10px;
      border: 1px solid #aaa;
      padding: 10px;
      position: relative;
    }

    .item img{
      width: 100%;
    }

    .item .tab {
      background: red;
      color: white;
      padding: 6px 10px;
      position: absolute;
      top: -4px;
      right: -4px
    }

  </style>

</head>
<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, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>
</html>

重點摘要：

  1. 絕對定位的物件，會自己獨立一層
  2. 往父層找第一個有 absolute/relative/fix 定位的物件作為基準定位，若都找不到，會以 viewport 定位

功課 :
蓋板廣告、xx 關閉按鈕


#position

s103071049




Related Posts

【單元測試的藝術】Chap 11: 設計與可測試性

【單元測試的藝術】Chap 11: 設計與可測試性

 Sunny
先別急著學 React

先別急著學 React

 saffran
Git 與 Github 版本控制基本指令與操作入門教學

Git 與 Github 版本控制基本指令與操作入門教學

 KD Chang

Comments