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
