*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
在flickr中

2017年7月22日 星期六

自由移動 DIV:relative, absolute, translate, z-index。完全理解!






自由移動!
block-level elements ;區塊層級物件

DIV
by 編輯老師

數位文本的意義給出方式,更大的依賴於媒材之間的空間位置關係,所釋放出來的理解過程。換言之,寫作過程中,媒材位置的排列佈置,往往是作者傳達寫作思維 意義的方 式。
就此,對於如何自由的去移動媒材,控制媒材所處的位置,就是必要的數位文本寫作技法。



  1. relative:相對法
  2. absolute:絕對法
  3. translate:轉移法
  4. 上下重疊

影音教學:






 

技 法一: position: relative;

一個典型的 position: relative; CSS語法。
 
<style>
/* relative語法 */
.posirela {
position: relative;   /* 啟動功能 */
top: -25px;             /* 向上移動 */
left: 100px;           /* 向左 移動 */
}

/* div寬高設定 */
.divposi {
width: 150px;
height: 150px;
border: 1px solid black;
}

</style>

下列是一個DIV 的html語法:

<div class="divposi">
這是示範的DIV

</div>

DIV 的呈現樣態如下。 
按這裡會把 .posirela 加入,產生變化。



這是示範的DIV
DIV後面的編輯寫作文字。DIV後面的文章…

幾個觀察的重點:

一、DIV移動後,「電腦」仍然認為DIV真正的所在的位置是不變的。所以整個版面沒有變動。移動只是視覺上的移動,真正的位置仍是沒有變動的。

二、DIV是以本身所在位置為計算原點,來進行移動位置的計 算,所以被稱之為相對的移動,relative。以DIV本身的top, right, bottom, left來計算。






 

技 法二:position: absolute;

請先看範例,觀察變化。
按 這裡來移動DIV。


這是父 級DIV。
這是內文的文字。
這是內文的文字。
這是要進行 absolute 移動的DIV



這是子DIV後的文字。
這是子DIV後的文字。



現在來看CSS語法:

<style>

/* 父級的DIV。一定要設定為relative */
.fatherdiv {
position: relative;
}

/* 要以absolute移動的DIV */
.absoludiv {
position: absolute;
top: -20px;
left: 150px;
}

</style>






觀察注意事項:

一、absolute移動DIV後,不但是在視覺上移動了,電腦同時也把原來在版面上所佔的位置取消了。所以會看到,下面的文字擠上來了。

二、absolute移動功能,是雙重結構的。要先有父級的DIV,然後裡面再設置 absolute要移動的DIV。如果沒有設置父級DIV,就會以「整 個網頁」當作父級DIV。所以會跑到最上面 click看 效果

三、移動計算的原點是以「父級DIV」的左上角為計算的原點(箭頭處)。





 

技 法三:transform: translate(x, y);

這是CSS較新的語法,可以x, y軸的移動,也可以單獨是x軸或y軸,來移動。

transform: translate(100px, -50px);  按此看效果
transform: translateX(100px);  按此看效果
transform: translateY(-50px);  按此看效果







CSS語法:

<style>
.transmov {
transform: translate(100px, -50px);
}
</style>
DIV後面的文字。後面的文字。







觀察注意事項:

一、translate 相當於 relative,是以本身的左上角為移動的參考點。

二、同樣的,被移動只是視覺上的效果,物件本身所佔的版面位置並沒有變化。所以,移動時,下方的資料並沒有任可變化。






 

技法四:上下重疊的變化

當二個(或以上)DIV彼此重疊時,要如何來決定那個在最上面,那個在最下面呢?彼此重疊的順序,要如何來決定呢?

如使用z-index後下例的變化。

A

B

CSS語法:

.divA {

position: relative;
z-index: 3;
}

.divB {
position: relative;
z-index: 2;
}

說明:
要重疊的DIV排序,都要有二道手序。
(一)是都要有 position 這個指令,才能相互比較。
(二)再使用z-index: 數字;來形成重疊順序。數字愈大,會在上面。
(三)position 的參數值可以是不同的,諸如 static、absolute、relative、fixed。例如一個是relative,而另一個是absolute,也是可以進行比較。







觀察說明:

一、一般而言,在預設的狀況下,應是會面的編輯元件會壓住前面的。

A

B

二、如果有幾個編輯元素要來排定重疊順序,我們就可以來使用 position & z-index 的共同使用功能。

三、一般的預設中,其實每個文件中的元件都是被預計為 z-index: 0; 。因此,如果只是單純的要把某一單獨元件拉到最下面,那麼只要同時為某一元件設定: position: relative; z-index: -1; ,就可以快速的拉到最下面。

例如,將照片上移(margin-top: -4em;),後壓前的原理,照片會蓋住文字。於是使用 z-index: -1; 這個技法,照片就會被拉到最後面,文字跑出來了:

.divzindex {
position: relative;
z-index: -1;
}

請按此看 z-index: -1 效果

這是一段文字。這是一段文字。
這是一段文字。這是一段文字。這是一段文字。
這是一段文字。

這 是DIV文字。