2013-04-22 181 views
-1

我在我的博客http://kasperikoski.blogspot.fi中添加了一個新的小部件,它基本上通過使用「添加HTML /腳本」作爲菜單工作。該代碼是博客HTML/CSS:position:fixed not working in chrome

.menukadn { 
    line-height: 1; 
    } 

    a.limeka, a.limeka:visited, a.limeka:active { 
    font-family: 'Maven Pro', sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
    color: #bbb; 
    text-decoration: none; 
    text-transform: uppercase; 
    transition: color 150ms linear; 
    letter-spacing: -0.090em; 
    } 

    a.limeka:hover { 
    color: #21a97e; 
    transition: color 150ms linear; 
    } 

而對於WIDGET:

<div class="menukadn"> 
    <a href="https://www.facebook.com/Kadnnn" class="limeka" title="" target="_blank">Facebook</a> 
    <br/> 
    <a href="http://instagram.com/kasperikoski" class="limeka" title="" target="_blank">Instagram</a> 
    </div> 

當我嘗試添加的定位就是這樣,

.menukadn { 
    line-height: 1; 
    position: fixed; 
    } 

或alternativly到窗口小部件DIV #HTML1自身:

#HTML1 { 
    position: fixed; 
    } 

它適用於Mozilla Firefox,但在Chrome中,我的窗口小部件HTML1位於距離它應該在的位置(列左外側)大約800px處,緊鄰內部身體左邊界。任何想法都可能存在一些導致矛盾的其他代碼?

+0

它適合我。 – 2013-04-22 17:20:58

回答

1

除了它的定位position:fixed你還沒有定義元素的位置,例如

#HTML1 { 
    position: fixed; 
    left:0; 
    top:0; 
} 

如果你想它相對於定位到屏幕的寬度,你可以嘗試這樣的事情:

#HTML1 { 
    position: fixed; 
    left:0; 
    right:0; 
    width: 200px; 
    margin:0 auto; 
} 

唯一的缺點是,你定義的寬度,之後,玩leftright,直到你有它想要的地方。

+0

不,那也沒用,因爲現在它的左上角。我只應該從上面看到親戚,但仍然只是在內在身體的左邊界旁邊。儘管屏幕分辨率不變,但內部身體的水平定位也相同 – 2013-04-22 17:29:08

+2

'top:0;左:0'只是一個例子。你應該定義適合你的職位。 – xpy 2013-04-22 17:45:16

+0

@KasperiKoski我改進了答案,看看它是否可以幫助你... – xpy 2013-04-22 17:49:05