ios 固定定位元素被隐藏的问题

最新推荐文章于 2023-03-29 10:25:19 发布
最新推荐文章于 2023-03-29 10:25:19 发布
阅读量2.1k 收藏 1
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_one2010/article/details/82464322
版权

在做web-app应用的时候，做了一个类似于通讯录的组件时，遇到ios系统将固定定位的元素部分隐藏的问题，页面如下

右侧导航的a-z被半部分隐藏，而在安卓或者chrome模拟则没有问题，如图

感觉非常奇怪，找了很久也没找出来。某天心血来潮，认为应该是overflow：hidden导致，因为导航组件在整个通讯录组件内部，而右侧固定的超出了通讯录组件的，最后在包裹通讯录组件的外部dom元素上添加style="overflow: initial;" 初始化overflow的属性，结果再次查看，ok了。。。。。

A_one2010
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ios fixed定位后内容不显示_IOS中APP出现屏幕无法滑动解决方案
weixin_39560002的博客
11-27 725
作者: xteamer成员: shuaiyin【摘要】首先，我们的APP一般来说，页面布局均是顶部和底部的导航栏是固定死的，因为方便用户的体验性，中间的内容部分实现滑动。那么这种布局的做法是如何实现的呢？首先我们最先想到的是flex布局，即弹性盒子模型。但是，最近遇到了在iOS中，出现无法滑动的问题，仔细的查看了布局，顶部和底部的导航栏均是使用fixed定位，就是因为这种布局出现了IOS中屏幕无法...
ios固定定位fixed兼容问题
chenqie1551的博客
11-10 364
将发送的输入框固定在底部时，iOS中，输入框会随着内容上下浮动。解决方法是将内容放在一个div里面 .main{ /* main绝对定位，进行内部滚动 */ width:100%; position: absolute; top: 1px; bottom...
解决IOS移动端固定定位失效问题
qq_38472451的博客
07-28 236
解决IOS移动端固定定位失效问题
fixed 布局后兄弟节点部分隐藏
weixin_30853329的博客
02-28 314
头部使用fixed布局时候 下面的css要使用dadding-top 来向下移动 不能使用top:141px；这样会导致部分的内容被隐藏 .header{ position:fixed; } .content{ position: relative; padding-top: 141px; } 外层使用 position: relative; 转载于...
苹果 ios端 position:fixed引起的BUG解决
11-14 3695
项目移动端在往下滑动超过一个屏幕要出现返回顶部的按钮，就用fixed固定在屏幕的右下角。 用谷歌调试工具，怎样调试都没问题，于是就放到了测试服务器上，用手机端访问。 4个安卓手机无论上下怎么滑动都没问题，苹果手机刚开始进去没问题，可是往下滑动着，滑动着，当返回顶部按钮出现之后，整个页面整个变成了白色，就剩下个返回顶部按钮在右下角，往上滑动返回顶部按钮隐藏，页面又出来，往下滑动，返回顶部按钮显示，...
解决移动端 ios 系统键盘遮挡的问题
01-20
CSS也可以帮助解决这个问题，例如设置`position: fixed`和`bottom`属性可以使元素始终固定在屏幕底部，即使键盘弹出也不会被遮挡。但这种方法并不总是有效，因为键盘弹出时可能会改变页面的整体布局。 5. **使用第...
浅谈Html5移动端ios/Android兼容性总结
12-14
然而，值得注意的是，苹果设备上的固定定位可能存在bug，检查`html`和`body`元素是否设置了`overflow-x:hidden;`，这可能导致问题。 在处理输入事件时，iOS对`keyup`、`keydown`、`keypress`的支持可能不尽人意。...
jQuery+CSS3仿IOS5通知中心.zip
11-19
该div中包含多个通知条目，每个条目都是一个独立的块级元素，通过CSS3的过渡（transition）和变换（transform）属性来实现滑动显示和隐藏。 1. **HTML结构**： 创建一个固定在页面顶部的div，作为通知中心的容器。...
始终固定在网页右上角的在线客服QQ代码
06-10
- 固定定位：要使客服QQ图标始终固定在右上角，可以利用CSS的`position: fixed`属性。这会使元素相对于浏览器窗口定位，即使滚动页面，元素依然保持在屏幕的固定位置。 - 定位坐标：使用`top`和`right`属性设置...
手机弹窗 禁止body滚动
04-09
在弹窗出现时，将body的`overflow`设置为`hidden`，隐藏超出的内容，不允许滚动；当弹窗关闭时，恢复`overflow`的默认值（通常是`auto`或`scroll`）。 ```css .no-scroll { overflow: hidden; } ``` 在...
ios fixed定位后内容不显示_你不知道的CSS（二）
weixin_39882623的博客
11-20 222
未知高度容器的多种垂直居中方法在已知父子高度的情况下，实现垂直居中是很容易的事。margin ， padding，absolute + 负margin , 甚至于 line-height都是可行的方案。这里不再展开，文章主要来介绍在父容器高度固定，自容器高度自适应的情况下，来实现其垂直居中于父级盒子的几种方案。为了使案例更真实，我们来模拟一个垂直居中于页面中的弹出层(modal)。先运行下Demo...
CSS定位属性？
tianming2020的博客
02-28 171
CSS定位属性？ CSS 文档流 CSS 有三种基本的定位机制： 普通流、浮动 流、定位流。 POSTION position定位属性，检索或设置对象的定位方式 position 属性值static 默认值 。 位置设 置为 static 的元素会正常显 示，它始终 会处 于文档流absolute相 相对 于父级 元素、的绝对 定位，浮出、脱离布局流，它不占据空间 ，就是我们 所说 的层 ，其位...
css的z-index、position、overflow属性混合时Safari的兼容问题，fixed定位+z-index同时使用不生效问题
止喜的博客
07-24 1500
～～～转前端啦～～～ 问题：position: fixed和z-index同时使用在Safari浏览器中不生效？？？
定位及元素的显示和隐藏
m0_53619602的博客
05-27 1248
一、定位 将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位由 定位模式+边偏移组成，接下来先来了解定位模式。 1.定位模式 position属性 position属性用于指定一个元素在文档中的定位方式。 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 static静态定位 默认定位方式，无定位的意思。按标准流特性摆放位置，没有边偏移 .
绝对定位超出父元素的解决办法
weixin_37714766的博客
01-09 8529
绝对定位超出父元素的解决办法 <!--html部分--> <div class = "div1"> <div class = "div2"> </div> </div> <style> * { margin : 0; padding : 0; } ...
解决ios中定位fixed的导航下滑时消失的问题
zhangxiaochunxy的博客
02-13 1042
查看原文 今天在开发过程中遇到了一个定位为fixed的导航，在ios设备中下滑消失的问题。这个导航的需求是始终悬浮在页面最顶端，不管页面怎么滑动都不变。 原代码如下： <div class="container"> <div class="back">返回</div> <div> 主题内容 </div> &l...
子元素设置position:fixed，z-index大于父元素依然被父元素盖住
qssn的博客
04-13 3507
在项目中遇到一个奇怪的问题，当父元素样式overflow有滚动条、borde-radius存在、position不为static时，和z-index不为auto时，子元素的position就算是fixed，且z-index大于父元素，也会被隐藏掉。源码和效果图如下： 直接体验请点击：链接 源码：源码 <style> #father { width: 200px; ...
ios苹果手机position：fixed的兼容性以及无法定位到全局的问题
weixin_53296753的博客
11-29 4321
首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。
微信小程序 苹果ios固定定位position:fixed失效bug
joe0235的博客
03-29 873
问题：底部固定栏设置 position: fixed; 挡住了下面的内容 设置了上面 view 的 margin-bottom ，微信开发工具中都正常，而且安卓真机下显示没问题，但是苹果真机却没启作用。 网上找了半天，发现除了给上面的 view 加 padding 和 margin 以外，还需要为page标签设置wxss样式： overflow-y: hidden; overflow-x: hidden; page{ height: 100%; overflow-y: hidden; over
如何解决IOS 下固定定位fixed 失效问题？
最新发布
06-10
在 iOS 下，当页面出现滚动时，fixed 定位的元素会失效，这是因为 iOS 下的 Safari 浏览器默认会为滚动的元素添加一个滚动条，而 fixed 定位的元素会脱离文档流，因此会相对于整个文档进行定位，而不是相对于滚动的元素进行定位。 解决方法有两种： 1. 使用 overflow-scrolling：touch 在需要滚动的元素上添加 `-webkit-overflow-scrolling: touch;` 样式，可以让滚动的元素不会添加默认的滚动条，从而 fixed 定位的元素不会失效。 示例代码： ``` .scroll-wrapper { overflow: auto; -webkit-overflow-scrolling: touch; } ``` 2. 通过 JavaScript 实现 通过监听滚动事件，动态改变 fixed 定位元素的位置可以避免 fixed 定位的元素失效。 示例代码： ``` var fixedElement = document.querySelector('.fixed-element'); var scrollElement = document.querySelector('.scroll-element'); scrollElement.addEventListener('scroll', function() { var scrollY = this.scrollTop; fixedElement.style.transform = 'translateY(' + scrollY + 'px)'; }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值