DIV空間位置布局：靠左、置中、靠右、上移、下移、重疊順序

margin

DIV（block區塊）與四邊的距離關係

輕鬆控制DIV：靠左、置中、靠右、上移、下移！

媒材與媒材之間的空間位置關係，是數位文本寫作的新的文本布局思考方向；就寫作技巧這面向而言，作者再區分出（一）排版寫作與（二）分層文本，這二種寫作的基本技能項目。這二項技能，都是用來處理「空間位置」關係的數位寫作手法。這可以使得數位文本作者有效的「掌握」對數位文本的寫作思考。

排版寫作除了之前教的，用表格的功能來完成外，
使用DIV來完成，是另一種方法。而且，可能是更重要的方法。因 為如果要使用互動寫作，對DIV的互動控制，是更容易的。
強烈建議一定要能掌握這種使用DIV的各種寫作手法。
在這裡，我們要來學會對DIV本身移動的寫作手法，亦即對DIV空間位置關係的操作掌握！

    Div  !! 

DIV #2

Div 靠左、靠中、靠右的 CSS：

靠左： margin-left: 0px; 【這是預設值，可不寫；也可以設定靠左的距離，紅字部分】

靠中： margin-left: auto; margin-right: auto; 【要寫這二個才有用】

靠右： margin-left: atuo; margin-right: 0px; 【要寫二個，可以設定靠右的距離，紅字部分】

往上移： margin-top: -120px; 【設定往上移的距離，（負數）紅字部分】

往下移： margin-top: 5px; 【可以設定往下的距離，紅字部分】

另一種class用的 CSS：

<style>
.marleft {
margin-left: 5px;
}

.marcenter {
margin-left: auto;
margin-right: auto;
}

.marright {
margin-left:auto;
margin-right:0px;
}

</style>

教學影音：

補充說明：
事實上，只要是區塊型的元件（block-level elements）都適用上述的CSS操作手法。
常見的區塊型元件有：audio, div, form, h1~h6, ol, p, table, ul, video 等。
另，常見的 inline-block元件有：iframe, img, object。

版面上移後的重疊順序調整

使用 margin-top: -xxpx; 來位移版面後，會出現一個常見的、要去調整的問題。那就是重疊的版面，要如何去調整其重疊的順序？


請看範例：

說明：

我們把下面的DIV內的圖像，使用 margin-top: -200px; 功能上移。一般而言，媒材會有「後壓前」的規則。所以，花壓在海景的上面。

但，如果你想更動重疊的順序呢？請按此看變化。


兩個DIV（媒材）可以同時加上下列語法的class：

<style>

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

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

</style>

這樣，重疊的順序就會產生變化。

注意，positon: relative; z-index: x; 這一組（兩個）都要使用，才能有效果。再來，z- index 後面的數字，數字大的，就會在壓在上面。一般 狀況下的預設值為 0 。


更動後的範例HTML語 法：

<div  class="positionbefore"><img style="width: 420px; height: 280px;"
src="圖像網址"><br>
</div>
<br>
<div style="text-align: right; margin-top: -200px;"  class="positionafter"><img
style="width: 320px; height: 213px;"
src="圖像網址"><br>
</div>



★特別注意事項：視覺的 V.S. 空間的（作用的）

一、如果DIV寬度的設定值，超過了可編輯空間的寬度。那麼，最後就只會是「靠左」這個預設值可起作用。

例如，本編輯區的寬度為578px。

語法：

<div style="width: 620px; border: 1px solid red;">
這是範例DIV。
</div>

呈現：

這是範例DIV。

二、如果DIV內（DIV 1）又設定DIV （DIV 2）。DIV 2的寬、高又大於DIV 1。那麼，（預設值中）DIV 2就會「破繭而出」，在視覺中超出於DIV 1。但是對電腦而言，真正的「實際使用空間」，仍是DIV 1 。請參考詳細教案。
下面範例中，可以看到DIV 2 雖然在視覺上比 DIV 1 更大，但只有在DIV 1 的範圍內，才有互動作用。

語法：

<div style="width: 200px; height: 200px; border: 1px solid red;">
<div style="width: 300px; height: 300px; border: 1px solid blue;">

</div>
</div>
這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。<br>

呈現：

DIV 1

DIV 2

這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。






使用DIV相 關技巧：

DIV + CSS 隨心所欲搞定網路排版寫作

超快速任意移動物件：position: relative

在div內任意移動編輯物件： position: absolute

隨心所欲移動編輯物件