今天在用 css position 定位時發現一個問題....

原本在 chrome + firefox 中都可以正確的將元素定位在指定的位置

但在IE只要你捲動視窗他就會跟著跑 @@

ex : 

<img src="images/index_artist-title.png" style="position:absolute;" id="startitle" />


<script language="javascript" type="text/javascript">
     $(document).ready(function(){
          var pos = $("#startitle").position();
          $("#startitle").css("left",eval(pos.left + 2))
     });
</script>

上面這段是我想要定位在它原本位置的位置附近偏右一點點....

然後IE很白痴的是你只要捲動滑鼠滾輪,被定位的那東西就會跟著跑 @@

(就是定位點是視窗的左上角,而不再是文件的左上角)

 

Clipboard01.jpg 

找不太到原因所以又去拜 google 發現一段致命性的文字

http://doc.housetube.tw/kb/article.php?id=24

 

但這邊有一個很重要的限制,就是父區塊的position不是設定absolute或relative時,定位就會繼續往上參考,換句話說當設定position為absolute的區塊要做定位時,參考的父區塊原點必須也要有absolute或relative的設定,如果都沒有設定就會參考到視窗的原點,我想這就是「絕對位置」的意思了,因為當你的區塊都沒有設定position的屬性時,你這個區塊就好像是絕對位置的設定。

 

意思就是當你要定位時,你的父容器也必須要是固定位置或設定 position : absolute,不然的話要定位的區塊會一層一層的往上找位置的參考

如果找不到就會參考視窗的原點,所以我捲動滑鼠他才會跟著動

但很奇怪的是 google chrome + firefox 居然沒這問題 @@

這次還是剛好網頁都是用 div 堆成才遇到的....所以之前用table 排版這樣寫都沒遇到....

    全站熱搜

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