2015-06-22 114 views
1

所以我在一個瀏覽器窗口內創建了一個small_window,在它內部有一個包含一些自動滾動文本的smaller_window。定位一個固定的孩子相對於父母的父母

而且我還希望small_window中的一些文本保持靜態,並且不要在smaller_window內滾動。所以這裏pos_fixed是絕對的,並且相對於small_window。

<header> 
<style type="text/css"> 
.small_window{ 
    position:relative; 
} 

#smaller_window{ 
    height:470px; 
    overflow-x:hidden; 
    overflow-y:auto; 
    position: initial !important; /* I expect this would make pos_fixed a child of small_window instead of smaller_window */ 
} 

p.pos_fixed { 
position: absolute; 
top: 200px; 
right: 30px; 
} 
</style> 
</header> 

<body> 
<div id="small_window"> 
    <div id="smaller_window"> 
     <p class="pos_fixed">This line is fixed relative to smaller_window</p> 
    </div> 
</div> 
</body> 

它在Firefox38和IE11上就像一個魅力。 不過,我很懷疑,因爲我的移動瀏覽器(Chrome移動)的跨瀏覽器的兼容性仍定位pos_fixed相對於smaller_window,顯然已經被忽略

#smaller_window{ 
    position: initial !important; 
} 

上更好的跨瀏覽器兼容的方式有任何建議來定位一個固定的孩子相對於父母的父母?

+0

這樣比較好。編碼是awfull ... –

回答

0

您不爲small_window添加類,而是在css中爲small_window編寫id如何工作?你可以把你的代碼放在小提琴裏嗎?