防止固定元素在相对定位元素的页面上消失

我必须完全误解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

防止固定元素在相对定位元素的页面上消失

回答

相关问题