防止固定元素在相對定位元素的頁面上消失

我必須完全誤解position: fixed;。防止固定元素在相對定位元素的頁面上消失

我希望頁面底部的固定元素始終佔據屏幕的底部。在Chrome 48.0.2564.116 Mac 10.9.5上，即使調整窗口大小以使window.document.body.clientWidth小於相對元素的左側位置，即小於510px的400px，它也可以正常工作。但如果在Android上的Chrome瀏覽器中查看此頁面，則如果相對定位元素的左側值大於屏幕寬度（或者其寬度未設置爲0px（（）），則.justifiedBottom組件會從屏幕底部消失。？！））。

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <style> 
    .positionedRelative { 
     position:relative; 
     top: 300px; 
     width: 0px; 
     left: 510px; 
    } 

    .justifiedBottom { 
     padding: 5px; 
     background-color: rgba(200,200,200,0.5); 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     right: 0; 
    } 
    </style> 

</head> 
<body> 
    <div class="positionedRelative"> 
    Hello 
    </div> 
    <div class="justifiedBottom">Next Page</div> 
</body> 
</html>

隨着360 clientWidth和322px .positionedRelative，以下是產生的左位（注意，固定元件被推離屏幕的底部）：

任何想法或指針在正確的方向將不勝感激。謝謝。

來源

2016-03-02 AJP

我認爲這是有關meta標籤和這篇文章和相關應該是有用的，但還沒有得到我的頭圓：http://www.quirksmode.org/mobile/viewports2.html – AJP

從它看起來，這是關於你的寬度。看看：https://jsfiddle.net/0Lqnfmad/3/

.positionedAbsolute { position:absolute; top: 300px; width: 100%; left: 0px; text-align: center; } 
.justifiedBottom { padding: 15px; background-color: rgba(200,200,200,0.5); position: fixed; bottom: 0; left: 0; width: 100%; }

看看是否有幫助！

來源

2016-03-03 00:26:59

道歉我錯誤地說'絕對'定位，當其實它是一個「相對」定位元素。 – AJP

其實沒關係。位於屏幕右側的絕對元素和相對元素會導致固定元素消失，並且當前的css實際上會使其變得更糟糕......將「.positionedAbsolute」左側更改爲30px，並且它已將固定元素從屏幕上移開（在鉻上，在Android上，在屏幕寬度爲360像素的手機上）。 – AJP

**編輯**此不起作用。如果您將.positionedRelative的左側值更改爲更大一些，例如420固定元素再次消失（？!!!）。

我還是不明白如何以及爲什麼position: relative;和position: fixed;相互干擾，但一個的解決方案似乎是包裹部件相對於在絕對定位組件：

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <style> 
    .positionedAbsolute { 
     position: absolute; 
     left: 0; 
     top: 0; /* Doesn't appear to be required but putting it in for good measure. */ 
    } 

    .positionedRelative { 
     position: relative; 
     top: 300px; 
     left: 320px; 
    } 

    .justifiedBottom { 
     padding: 5px; 
     background-color: rgba(200,200,200,0.5); 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     right: 0; 
    } 
    </style> 

</head> 
<body> 
    <div class="positionedAbsolute"> 
    <div class="positionedRelative"> 
     Hello 
    </div> 
    </div> 
    <div class="justifiedBottom">Next Page</div> 
</body> 
</html>

來源

2016-03-03 11:33:23 AJP

防止固定元素在相對定位元素的頁面上消失

回答

相關問題