position:fixed 失效

如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 。

把 transform删除或设置为none就可以解决啦。

但是如果transform是必要的,不能删除,我们可以在此父级最外层再加一层元素专门用于定位,这样position:fixed就能生效啦。

举个栗子:

/* 一定要将ancestor和parent的大小设置为一样大*/

.ancestor{

position: relative; /*重点*/

width: 300px;

height: 300px;

}

.parent {

width: 300px;

height: 300px;

overflow: auto; /*重点*/

}

.child {

position: absolute;/*重点*/

width: 320px;

height: 320px;

}

嗯...大概意思就这样。

时间: 2024-11-05 20:29:25

position:fixed 失效的相关文章

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失效情况

<!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失效问题

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

IE6 position:fixed 固定定位问题

IE6下 position:fixed失效,解决方法如下: 除了IE6的浏览器 .top { width: 97px; height: 278px; background: #e0c157; position: fixed; z-index: 30000; /*    控制左右位置*/ right: 50px; margin-bottom: 10px; } 针对IE6使元素固定在浏览器的顶部 .top{  _position:absolute; _bottom:auto; _top:expres

position:fixed之safari的坑

mobile开发如今已经越来越步入正规,很多问题也得到了各大浏览器厂商的支持和修正,比如今天要说的ipone下的fixed,如今Safari也的得到了支持,不过却还有些比较坑得地方. 今天要说得这个坑是关于safari全屏模式,当页面进入全屏模式(向下滚动以后页面默认会进入全屏模式)时页面底部就不可交互,看起来好像事件失效了一样,这个是时候窗口底部的任何工具栏,链接或者通过fixed底部固定的工具栏等等都没法点击了,这时点击只会触发Safari退出全屏得动作,然后调出Safari 工具栏,需要再

如何在IE6下实现position:fixed效果

如何在IE6下实现position:fixed效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.由于IE6并不支持position:fixed,所以导致很多好的效果都无法实现,但是在IE6下并不是不能够实现此中效果,下面就通过一段实例介绍一下如何实现此种效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="autho

关于position:fixed;的居中问题

通常情况下,我们通过操作margin来控制元素居中,代码如下: 1 #name{ 2 maigin:0px auto; 3 } 但当我们把position设置为fixed时,例如: 1 #id{ 2 position:fixed; 3 margin:0px auto; 4 } 以上代码中的margin:0px auto;会出现失效问题,盒子并未居中.这是因为fixed会导致盒子脱离正常文档流.解决方法非常简单,只要应用如下代码即可: 1 #name{ 2 position:fixed; 3 ma

IE6下fixed失效的解决方法

在网上找了好久,终于找到一种亲测有效的解决方法. <!--[if IE 6]> <script type="text/javascript"> (function($) { jQuery.fn.Fixed = function(options) { var defaults = { x:0, y:0 }; var o = jQuery.extend(defaults, options); var isIe6 = !window.XMLHttpRequest; v

解决ios、微信移动端的position: fixed; 支持性不好的问题 &amp;&amp; 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就