fixed定位在ios中无效

17岁秀才想当画家
  • 684
//主要html:
<div class="header">header</div>
<div class="content">
  content
  <div class="fixed">fixed定位元素</div>
</div>
<div class="footer">footer</div>

fixed定位元素的宽高是100%,有translaste3d属性,z-index:9999;父级content有overflow:auto
问题是,ios(11.x最新版)自带的safari浏览器下,fixed定位元素的头部和底部会被headerfooter挡住,在安卓或者pc浏览器上没有问题。


以下是最新测试发现,不一定准确:
当点击fixed定位元素的头部或底部的时候,看上去像是点了header或`footer,实际上是点到了fixed元素,即:实际上fixed元素是在最上层的,但是显示效果被遮挡了。

回复
阅读 5.8k
4 个回答

添加头部

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

ios 下的 fixed 是假的,感觉上是通过绝对定位做的东西
可以在body下绝对定位一个100%大小的div,来实现这种全屏的覆盖
要注意的就是这时候的body就不能滚动了,得用div滚动
html

body
    div.fixed
    div.scroll

css

html,body,.scroll
    width:100%
    height:100%
    overflow:hidden
    position:relative
.scroll
    overflow:auto
.fixed
    position:absolute
    width:100%
    height:100%

请问.解决了吗..我这个fixed不是以body定位的.只能撑满我内容的div

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏