2015-06-22 106 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如何工作?你可以把你的代码放在小提琴里吗?