之前工作時曾經遇過 CSS position 定位的問題

請看這篇 : http://sweeteason.pixnet.net/blog/post/33036628

簡單說明就是如果父項目定位不是absolute or relative

定位就會一直往上參考直到視窗的左上角 top:0  left:0

所以解決方法是在他父項目加上如下 : 

<div style="position:relative;">

    <img src="xxxx.jpg" style="position:absolute;"/>

</div>

這樣在動態操作 img 定位時就可以參照上一層的位置

ex: 

var pos = $("div").position();

$("img").css("top",pos.top)

             .css("left",pos.left);

這樣的話如果要控制 img 的定位,就會從他的父項目開始計算,而不是從視窗左上角 

 

但現在在Firefox上遇到一個問題 (IE、Chrome 不會)

 

如果你的上一層是 table 的 td 一樣會參考到視窗左上角的位置

為何咧???

查到的結果只能說這是 W3C 的 spec 

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

 

relative


The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

 

因此要解決這個問題可以在上一層包一個 div 並且給他 position:relative

或是把上一層設定成 position:fixed (測試過可行)

 

 

 

arrow
arrow
    全站熱搜

    小雕 發表在 痞客邦 留言(0) 人氣()