iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
2

嗨~大家今天過得好嗎?(揮手)

上一篇我們好不容易說明完了用float及clear的排版方式了,所以我們現在知道了可以用 CSS RESET 來去除瀏覽器默認樣式來讓網頁能顯示一致,也知道了可以用{margin:0 auto;}來讓網頁置中顯示,用float可以讓元素並排,但是後面要記得用clear,才能讓後面的元素正常顯示,不會重疊。

那今天要講的絕對定位與相對定位是什麼呢?白話來講就是,若使用絕對定位,我們可以要求元素擺在視窗的任何一個地方,若是相對定位的話,我們可以要求元素擺在相對於另一個元素的任何地方,請看以下 codepen
https://ithelp.ithome.com.tw/upload/images/20190912/20119529o55NExamPt.png

先來說說相對定位吧

這個網頁是我們熟悉的上一篇文章的排版網頁,但被我加上了許多小方框,請先看頭段.header部分

<div class=”header”>
 <div class=”square-head-1">1</div>
 <div class=”square-head-2">2</div>
 <div class=”square-head-3">3</div>
 <div class=”square-head-4">4</div>
</div>

再來是他的 CSS

.header{
   border:1px solid black;
   height: 200px;
   margin:10px;
   background:orange;
   font-size:32px;
   padding:50px;
   position: relative; ← 我說的是這個
}

有看到 CSS 裡面很後面那一行{position: relative;}嗎?最重要就是這一個,再來我們來看裡面.square-head-1.square-head-4 的 CSS 怎麼寫的

.square-head-1,.square-head-2,.square-head-3,.square-head-4{
   width: 50px;
   height: 50px;
   background: black;
   position: absolute; ← 我說的是這個
   color:white;
   font-size: 32px;
   padding: 10px;
}
.square-head-1{
   top: 0;
   left: 0;
}
.square-head-2{
   bottom: 0;
   left: 0;
}
.square-head-3{
   bottom: 0;
   right: 0;
}
.square-head-4{
   top: 0;
   right: 0;
}

在一開始的.square-head-1.square-head-4,一些長、寬、背景及文字顏色的語法我就不再多說了,這裡只提一語法就是{position: absolute;},然後在下方我又各自對.square-head-1.square-head-4 下了(top、left、bottom、right)0的值,記得,只有0可以不用加單位,其他數值必須要加單位,我曾為此鬼打牆了很久。

現在白話文講一遍,我在.square-head-1.square-head-4下了{position: absolute;},然後在他們的父元素.header下了{position: relative;}的語法,就啟動了.square-head-1.square-head-4這四個元素可以相對定位於.header這個範圍內,至於要怎麼定位,由(top、left、bottom、right)這四個來控制,以.square-head-1來舉例,他為{top: 0;left: 0;},表示他的位置從上面起算 0 及從左邊起算 0 組成,那不就恰恰好是.header區塊的左上方嗎?再說明一個.square-head-4,他為{top: 0;right: 0;},他從上面起算 0 及從右邊起算 0 組成,所以是右上方,其他兩個以此類推,不再贅述。

除了塞在邊邊角角,還可以擺在任何地方

再來我們看看.left.header大同小異,先看他的 HTML,是不是根本就一樣。

<div class=”left”>
 <div class=”square-left-1">1</div>
 <div class=”square-left-2">2</div>
 <div class=”square-left-3">3</div>
 <div class=”square-left-4">4</div>
</div>

再來是他的 CSS

.left{
   width: 180px;
   font-size:32px;
   border:1px solid black;
   height: 400px;
   float:left;
   margin:10px;
   padding:50px;
   background:pink;
   position: relative; ← 我說的是這個
}

一樣的,有看到 CSS 裡面最後面那一行{position: relative;}嗎?再來我們來看裡面.square-left-1.square-left-4的 CSS 怎麼寫的

.square-left-1,.square-left-2,.square-left-3,.square-left-4{
 width: 50px;
 height: 50px;
 background: black;
 position: absolute;
 color:white;
 font-size: 32px;
 padding: 10px;
}
.square-left-1{
 top: 30px;
 left: 30px;
}
.square-left-2{
 bottom: 30px;
 left: 30px;
}
.square-left-3{
 bottom: 30px;
 right: 30px;
}
.square-left-4{
 top: 30px;
 right: 30px;
}

沒錯,是不是大同小異,只是(top、left、bottom、right)的值我下了30px,所以他們各自開始往內推移,所以利用這樣的方式,你就可以讓元素在他的父元素內任意地擺放了。

還可以重疊喔

我用.center示範了這個特性,還因此更改了他們的背景顏色好知道他們各自在哪裡,我們直接看 CSS 吧,因為 HTML 根本就都一樣

.square-center-1,.square-center-2,.square-center-3,.square-center-4{
  width: 50px;
  height: 50px;
  position: absolute;
  color:white;
  font-size: 32px;
  padding: 10px;
}
.square-center-1{
  top:110px;
  left:260px;
  background: green;
}
.square-center-2{
  bottom:220px;
  left:220px;
  background: yellow;
}
.square-center-3{
  bottom:200px;
  right:200px;
  background: purple;
}
.square-center-4{
  top:180px;
  right:240px;
  background: grey;
}

有發現嗎?,我透過控制(top、left、bottom、right)的值,而讓他們彼此可以重疊再一起,這就是神奇的地方。

若你已經懂了相對定位,絕對定位也很簡單

絕對定位就是把父元素的{position:relative;}拿掉,其他都不變的話,我們來看看會網頁會發生什麼事情。
請看codepen
https://ithelp.ithome.com.tw/upload/images/20190912/20119529ese30umMLR.png
有發現怎麼所有方框都往四邊移動去了呢?因為沒有他們各自父元素的{position:relative;}(top、left、bottom、right)的值均從網頁的四個邊界開始起算,所以就通通跑到外面去了呢,絕對定位就是這樣講完了,你可以縮放一下網頁,就會發現很有趣的事情,方框會來跑去。

position 還有一個值,叫 position: fixed

先看 codepen,進去以後先幫我捲動視窗,就知道會發生什麼事了
https://ithelp.ithome.com.tw/upload/images/20190912/20119529TRhV42ommb.png

.square-head-1{
   width: 200px;
   height: 250px;
   background: black;
   position: fixed; ← 我說的是這個
   color:white;
   font-size: 16px;
   padding: 10px;
   bottom: 50px;
   left: 100px;
}

有發現左下角的說明框,不管怎麼捲動頁面,他都會固定在那邊不變嗎?沒錯,這個就是{position: fixed;}這個值的特性,他所有的(top、left、bottom、right)的值,都會從瀏覽器邊框開始起算,並且固定著不動,所以他是沒有辦法配合父元素的{position:relative;},把他鎖在父元素範圍內不動的喔,他相對的位置就是瀏覽器邊框。

今天的position(absolute、relavive、fixed)就介紹到這邊,下次見囉


上一篇
今天我們用 CSS 來排版吧
下一篇
CSS 的 LOGO 圖片隱藏標題與選單並排
系列文
破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師38

尚未有邦友留言

立即登入留言