測試一下 TinyMCE 製作 2D Layer

position: absolute 是個有趣的功能, 可以使 Layer 以網頁 left top 為基準作 x,y 軸的設定

從而達到隨意設定方塊顯示 位置的方法.

基本的 position:absolute 在 tinyMce 裡面已經可以制作.

而 position:absolute 的還有另一個特性,

只要其父系元素是 position: absolute/relative, 則以其父系元素為準.

e.g.

<div style=”position:absolute; top:100px; left:100px; >Layer A</div>

<div style=”position:absolute; top:120px; left:120px; >Layer B</div>

則會得到 2 個 於頁面上特定位置的 Layer.

但如果是.

<div style=”position:absolute; top:100px; left:100px; > Layer A

<div style=”position:absolute; top:120px; left:120px; >Layer B(Child)</div>

</div>

會發現例子二的 Layer B, 會使用 top: 220px, left:220px 為基準.

以此可令 Blog 完全支援 2D Layer 於多個 Post 中的定位.

只需查探 blog template 中負責劃分每個 post 的 tags 在本 wordpress 中能看到.

<div class=”fee-field fee-filter-the_content” data-type=”rich” data-post_id=”176″ >

以上為每則文章的 Class, 其中 fee-field 於 css 中沒有標明其 Style 值於是借用為其標上如下語法

.fee-field{ position: relative; /* For 2D Layer absolute position. */}
.PS: IE8 於這個功能會有問題.
小 Demo :

[html]
<div style="position: relative; width: 500px; height: 200px; background-color: yellow; z-index: 2;">
Parent
<div style="position: absolute; width: 350px; height: 50px; left: 80px; top: 30px; background-color: #eecccc;">Child left:80px; top:30px;</div>
<div style="position: absolute; width: 100px; height: 150px; left: 230px; top: 20px; background-color: #ccccee;">Child left:230px; top:20px;</div>
</div>
[/html]

Parent

Child left:80px; top:30px;
Child left:230px; top:20px;

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料