CSS Position 位置



CSS 教學  >  位置

在 CSS 中常見的位置 (position) 屬性有以下幾種:

  • position
  • top
  • right
  • left
  • bottom
  • overflow
  • z-index

    position

    position 屬性制定出要用哪一類的位置。可能的值有:

    • static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話,那 top、bottom、left、和 right 的值就都沒有意義了。

    • absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素也會跟著改變位置。

    • relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。

    • fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素的位置不會改變。

    top, right, bottom, left

    每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。

    讓我們來看個例子:

    CSS 碼:

    div {
      background-color:#FF00FF;
      width:500px;
      height:60px;
    }

    p {
      position:relative;
      top:10px;
      left:50px;
    }

    在這哩,以下的 HTML 碼,

    <div>
      <p>舉例文字。
    </div>

    會顯示出,

    舉例文字。

    請注意以上文字的位置:它是在離粉紅色方塊上面 10px,及左邊 50px 的地方。

    overflow

    overflow 屬性是用來設定當內容放不下時的處理方式。可能的值包括:

    • visible: 內容完全呈現,不管放得下放不下。
    • hidden: 放不下的內容就不顯示出來。
    • scroll: 無論內容放得下放不下,都加入上下捲軸及左右捲軸的功能。
    • auto: 當內容放不下時,加上捲軸的功能。

    以上這四個值的例子如下:
    auto
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 auto。


    hidden
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 hidden。


    visible
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 visible。


    scroll
    我們用這一區來看不同的 overflow 值展現出來會有什麼不一樣。

    這裡展現的值是 scroll。


    z-index

    z-index 屬性是用來決定元素重疊的順序。換言之,當兩個元素有重疊的情況時,z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。

    舉例來說,假設我們有以下的 CSS 碼:

    #redblock {
      z-index: 1;
      position:
      absolute;
      width:80px;
      height:100px;
      top:20px;
      left:20px;
      border: 1px solid #FFF;
      background-color: #FF0000;
    }

    #pinkblock {
      z-index: 2;
      position: absolute;
      width:100px;
      height:80px;
      top:50px;
      left:50px;
      border: 1px solid #FFF;
      background-color: #FF00FF;
    }

    以下的 HTML 碼,

    <div id="redblock"></div>
    <div id="pinkblock"></div>

    會顯示出,

    從以上可見,粉紅色方塊 (pinkblock) 的 z-index 值 (2) 比紅色方塊 (redblock) 的 z-index 值 (1) 高,因此粉紅色方塊在上面。

    下一頁: CSS 文字




    Copyright © 2017   1keydata.com   版權所有