移动网页侧边栏 fixed 失效

2024-11-04

移动端网页fixed布局问题解决方案

问题说明移动端web的footer常常设计为fixed布局,但是在页面键盘被拉起时fixed的布局会出现问题,自己试了下,在较低版本ios和部分安卓机上会有此问题.具体问题看图示: <body class="layout-fixed">  <main> <input type="text" placeholder="Footer..."/> <button c

关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {passive: false}); function handler() { event.preventDefault(); } var contentBox=document.getElementById("contentBox") contentBox.ontouchstart = func

position:fixed 失效

如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果transform是必要的,不能删除,我们可以在此父级最外层再加一层元素专门用于定位,这样position:fixed就能生效啦. 举个栗子: /* 一定要将ancestor和parent的大小设置为一样大*/ .ancestor{ position: relative; /*重点*/ width: 300p

微信内置浏览器H5 弹出键盘遮盖文本框解决办法 Fixed失效

if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", function() { if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") { window.setTimeout(function() { docume

fixed 失效

1. 父元素设置 transform 属性后, 会导致 position: fixed 失效. 2. 设置以下属性也会影响 fixed 属性. -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;

iframe中positioin:fixed失效问题

页面中嵌套的iframe 内的 position:fixed元素定位失效fixed正常页面此时position:fixed是根据浏览器窗口定位的,下拉一直位于左上角:以iframe形式嵌入后此时position:fixed是根据iframe窗口定位的,下拉fixed元素消失:这种问题应该用什么思路解决呢当时做的是在iframe页面中点击分享图片,弹窗二维码的功能,要让二维码图片相对于外部window窗口固定定位. $(".share a").click(function(){

position:fixed失效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

position:fixed失效情况

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

偏前端 - ios下position:fixed失效的问题解决

如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:fixed这个css属性就会失效,你懂的,苹果就是搞特殊,下面我就用css来解决这个问题. 1.这个是要滑动的内容的css: .page-content { overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-bo

position:fixed失效问题

fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效. 解决方法:使用transform样式的元素,不要包含fixed定位的子元素.

IOS中弹出键盘后出现fixed失效现象的解决方案

概述这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上,页面超过屏幕大小时候输入框focus状态下(键盘弹出)绝对定位的元素失效,导致页面滚动时候把定位元素一并带走,体验十分不好,在此留下一自己的方法,让更多的人不需要再爬这样的小坑. 解决方法原理很简单,就是定义一个外框把页面包起来,把需要使用fixed定位的元素设置成absolute定位,然后设置外框元素的样式为overflow-y:scroll即可,下面是实例:假设外框元素为.wrap,需要fixed定位的元素为.pos

ios解决输入框弹出后position:fixed失效问题

最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题.position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激活时,会出现位置错位的问题. 如下图: 受到CSDN上刘华童鞋(http://my.csdn.net/liu__hua)的启发,找到了目前位置比较完美的解决方案. <!DOCTYPE html> <html lang="zh_cmn"> <head> &

ios webview下footer部分fixed失效问题

场景: 如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区然后footer的css一般是这样的 footer{ position:fixed; bottom:; left:; width:100%; `````` } 实测chrome下没毛病,ios微信浏览器打开也没毛病,但是!!! 在ios给我们开的webview里面,这个footer部分开始“跑”了, 具体情况是,footer在页面滑动的时候也跟着滑动了,等滑动完毕, footer部分又自动“归位”了,锁定到了底部

在safari上，解决fixed失效问题

一个页面中有头部.底部和中间内容区域,底部固定在屏幕底端. 头部header 内容main 底部footer 方法一.在main上使用fixed定位,加上overflow-y属性. .main { position: fixed; top: 50px; bottom: 50px; overflow-y: scroll; } 不推荐这个fixed方案,因为页面偶尔卡住不动. 方法二.中间的main不设定位,高度100%,再padding头部和尾部, 其中头部和底部的定位设为absolute会比设为

position:fixed 失效问题

为了提升动画性能,在body上加上了transform:translate3d(0,0,0) 但是3d使得新建了一个层(具体原因请参考:高性能css动画),导致position:fixed不在当前的层上. 所以要在需要的地方设置3D!

ios上position:fixed失效问题

手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了固定定位的底部导航在ios上被弹出去此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="main_comment">```````````````````</div> <div class="commentBar">回复框</div> .main_comment{ width: 100%; position: absolute;

css fixed 失效问题解法

https://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome 开启css硬件加速,transform: translateZ(0); 更好的办法是: 调整布局,把父元素的absoluate 属性去掉

不受控制的 position:fixed

本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fixed 的元素将相对于屏幕视口(viewport)的位置来指定其位置.并且元素的位置在屏幕滚动时不会改变. 但是,在许多特定的场合,指定了 position:fixed 的元素却无法相对于屏幕视口进行定位.这是为何呢? 失效的 position:fixed 在许多情况下,position:fixed

absolute和fixed

共同点: 改变行内元素的呈现方式,display设置为block:让元素脱离文档流,不占据空间:默认会覆盖到非定位元素上. 不同点: absolute的根元素是相对于static定位以外的第一个父元素进行定位,是可以自己设置的,而fixed的根元素固定为浏览器窗口,当滚动网页时fixed元素与浏览器间的距离是不变的.

关于在transform下的子元素设置fixed无效的困惑

最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这下颠覆我了.千辛万苦,细致排除,终于发现是transform导致的fixed失效,而且目前似乎没有解决方案,除非绕过.同时,也借此算是彻底知道百度跟google的差距了. 有两篇较有用的文章谈到了这个,地址分别是http://meyerweb.com/eric/thoughts/2011/09/12

position的absolute与fixed共同点与不同点

这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上 B不同点: absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口. 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的. 典型应用案例: 加了遮罩的居中弹窗,假如有很多屏,就得使用fixed,不然向下滚动弹窗和遮罩不会跟着走. <input type="button"