移动端 position fixed无效

最新推荐文章于 2022-11-28 16:43:16 发布
最新推荐文章于 2022-11-28 16:43:16 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： css 文章标签： 移动css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zerofine/article/details/50345069
版权

要在fixed的里面加一层position为absolute的专门用来装元素

<head>
<meta name="description" content="CSS position:flex in mobile" />
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
header,
footer {
  width: 100%;
  height: 50px;
}
header .fixed,
.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  height: 50px;
}
header .fixed .wrap,
.fixed .wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header .fixed .wrap.float h1,
.fixed .wrap.float h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 20px;
  line-height: 50px;
  color: #fff;
  text-align: center;
}
header .fixed .wrap.float .glyphicon,
.fixed .wrap.float .glyphicon {
  display: inline-block;
  margin: 12px 10px;
  color: #fff;
}
header .fixed .wrap.float .left-icon,
 .fixed .wrap.float .left-icon {
  float: left;
}
header .fixed .wrap.float .right-icon,
 .fixed .wrap.float .right-icon {
  float: right;
}
header .fixed .wrap.float:before,
 .fixed .wrap.float:before,
header .fixed .wrap.float:after,
.fixed .wrap.float:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
header .fixed .wrap.float:after,
 .fixed .wrap.float:after {
  clear: both;
}






header .fixed {
  top: 0;
  background-color: #45b97c;
}
 .fixed {
  bottom: 0;
  background-color: #464547;
}
.main {
  margin: 15px 10px;
}
</style>
</head>
<body>
  <header>
    <div class="fixed">
      <div class="wrap float">
        <div class="left-icon">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </div>
        <h1>HEADER</h1>
        <div class="right-icon">
          <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-list"></span>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    -------------- start --------------<br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    --------------- end ---------------
  </div>
 <div class="fixed">
      <div class="wrap flex">
        
      </div>
    </div>
</body>

zerofine
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS表达式(expression)解决IE6 position:fixed无效问题
09-25
IE6 position:fixed无效在做兼容时，很是头疼，本例通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果，有需要的朋友可以参考下
关于移动端position:fixedbug的解决方法
weixin_30613433的博客
07-30 453
原因：移动端手机激活软键盘，fixed定位会出现元素位置漂移 解决办法：头部底部使用fixed定位，中间正文部分使用absolute，并设置top值和bottom值为顶部底部的高度。 具体代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
移动端ios使用fixed定位，偶现元素不显示问题（百度浏览器）
qq_41906802的博客
04-19 1632
移动端，百度浏览器使用fixed问题
使用fixed的时候，在手机上看是否会有问题，怎么解决？
IT修真院：初学者转行到互联网的聚集地
05-14 447
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能，本篇分享的是： 【 使用fixed的时候，在手机上看是否会有问题，怎么解决？】 大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。 今天给大家分享一下，修真院官网css任务4，深度思考中的...
css ios android 位置变化,小技巧css解决移动端ios不兼容position:fixed属性，无需插件...
weixin_42466518的博客
05-27 295
.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}.head{top:0;}.foot{bottom:0;}.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;ba...
vue项目移动端position: fixed；不生效原因及解决方案
weixin_42280496的博客
07-22 4786
1.问题描述： 我用vue做的是一个官网，现在要适配移动端。就如大部分的移动端页面那样，顶部有个固定定位的导航栏。我们这个官网在pc状态时也是有的，但是固定定位(position: fixed;)在pc时是没问题的，切换成移动端后，css里写了position: fixed但并没有生效，div还是会跟着滚动轴的滑动而被卷起来。 2.解决问题： ①百度后发现大多的解决方式就是在父或上级或上级上级 … 找有没有设置transfrom这个css属性，如果有的话 把它的值改为none或者直接去掉。【我的项目里没有
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
css3 position fixed固定居中问题解决方案
09-25
让此元素位置固定一般会添加position:fixed，但元素就不能居中了，fixed使对象脱离了正常文档流，解决方法如下
ie6 position-fixed效果
09-27
1、参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 2、操作系统：Windows 我喜欢position:fixed，它很酷。 但ie6总不支持它，所以用其他的属性来模拟（这个模拟在主流浏览器中都兼容，所以其他...
使用position:fixed属性让DIV居中
09-25
下面与大家分享下使用position:fixed属性让DIV居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto，感兴趣的朋友可以参考下哈
解决position：fixed 固定定位失效问题
铁锤妹妹的博客
05-22 1万+
最近在项目开发过程中遇到了一个固定定位失效的问题，当给底部定位元素设置了position： fixed并设置了距离top和left，bottom的距离之后发现位置居然一直不正确，fix固定定位失效了。 百度看了些文章说是父元素如果存在 transform 属性或者移动端设置-webkit-overflow-scrolling属性时会出现同样的问题 我的页面父元素未设置 transform ，就全局搜索了-webkit-overflow-scrolling，发现全局样式里设置了，百度了-webkit-over
uniapp position: fixed 偶尔失效/不起作用（不显示）（苹果手机position: fixed兼容性/失效）
qq_17627195的博客
09-11 5426
在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。我也是网上查找的原因，似乎知识IOS系统（苹果）手机的问题。的元素放在可以滚动（拥有滚动条）元素的外面，包括。，要确保当前元素的父元素都不能添加滚动样式。的时候，如果期望实现先对。浏览器窗口定位的兼容。
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 5649
position: fixed问题分析
fixed在移动端失效的问题
thebigbuding的博客
03-04 5948
其实在安卓机上fixed的适应性要远远比ios上好，真是接地气啊哈哈。之前第一次遇到这个问题的时候非常惊讶，那时候在用sui mobile的组件库，里面就有底部导航栏，用了fixed。但是随着屏幕向上滚动，超过一定距离，这个底部导航栏竟然也跟着上去了。并且在我的安卓机上是没多大影响，但是在ios上就这样了。不过我同事的安卓机竟然比在ios上还夸张。什么原因导致的？经过我多方调研，其实移动端在早些年以
移动端 position:fixed失效问题
spfLinux的博客
02-26 2905
当页面比较长时，滚动页面，发现设置的固定定位失效发现可以这样子解决将不是固定定位的其他元素放在一个div中，给这个div设置这样的样式：.con{ overflow-x:auto; overflow-y: scroll; }一切ok参考链接：点击打开链接...
移动端 position:fixed; 定位在iOS系统上失效，该怎么解决
热门推荐
贵林之恋的博客
01-30 4万+
今天公司运营人员在苹果手机上浏览页面时发现一个bug，就是根据浏览器窗口position:fixed; 定位在底部的元素，会随着屏幕的滚动而滚动，在iOS系统上失效，随后让我改。自己在网上搜了一些解决办法，最终觉得以下办法相对简单。如果有更简单的办法，欢迎各位大神互相交流，解决办法如下： html我就不写了，有兴趣的可以看看我修改的项目点击打开链接 把需要用手滑动的内容用clss为.conte
项目中遇到的小问题，position:fixed无效的一种情况
古语静水流深
05-06 2万+
position: fixed;无效
position:fixed失效的几种情况
weixin_45464787的博客
04-16 4436
在许多情况下，position:fixed 将会失效。MDN 用一句话概括了这种情况： 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那么该元素将相对于设定了 transform 的祖先元素进行定位。 那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？ 这个问
移动端解决fixed滚动出现抖动的问题
最新发布
05-02
2. 使用position:sticky，而不是fixed，对于支持sticky的浏览器，它会在页面滚动时保持元素的位置，并且不会产生抖动。 3. 使用JavaScript，通过监听滚动事件，在滚动时实时更新固定元素的位置，从而避免抖动。 综...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值