李明哲老師多媒體互動寫作教學: 自由移動 DIV：relative, absolute, translate, z-index。完全理解！

自由移動！

block-level elements ；區塊層級物件

DIV

by 編輯老師

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

relative：相對法
absolute：絕對法
translate：轉移法
上下重疊

影音教學：

技法一： 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後下例的變化。

CSS語法：

.divA {

position: relative;
z-index: 3;
}

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

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

觀察說明：

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

二、如果有幾個編輯元素要來排定重疊順序，我們就可以來使用 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文字。

有關疊層次序的原則：

移動物件寫作技法比較：margin-top: -15px; 和 postition: relative; top: 5px; left: 5px; 的不同

我們以前學過，要讓在版面下方的編輯物件上移，可以使用 margin-top: -15px 這個技法。也就是使用負數的上邊界功能，讓下方版面整個上移，達到編輯目的。按此看效果。

現在，也可以使用 postition: relative; top: 5px; left: 5px; 這一組CSS語法，來自由移動編輯物件。

兩者看起來效果差不多，但電腦對這者的「認知」是完全不同的。

margin-top: -15px; 是讓「版面往上移」，而 postition: relative; top: 5px; left: 5px; 這一組，只是「編輯物件移動」，就電腦而言，版面是沒有變動的。

所以，如果你只是想「移動編輯物件」，但又不想破壞原本就設計好的版面，就應要使用 postition: relative; top: 5px; left: 5px; 這一組CSS語法，才是正解。

請按此看效果。

CSS語法：

<style>
/*移動位置的一組語法*/
.posichange20171213 {
position: relative;
top: -3em; /*這是指以物件的左上角為原點來計算，正負值均可*/
left: 10em; /*em 是指以字母的距離來計算*/
}
</style>

使用Kompozer的 CSS編輯器，操作如圖：

【說明】：

「位置」的地方，請設定「相對位置」，這即是 position: relative;
「位移」的地方，請在「頂端」及「左邊」設定參數值。這即是 top: -10px; left: -20px;

李明哲老師多媒體互動寫作教學

2017年7月22日星期六

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

沒有留言:

張貼留言

2017年7月22日 星期六

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

沒有留言:

張貼留言

2017年7月22日星期六