chrome 下 position：fixed失效（react）

子元素使用position：fixed时，没有相对于浏览器视窗进行定位，排查后发现他的祖先元素设置了transform属性

当transform属性值不为none时，设置了position：fixed的元素会相对于设置了transform属性的元素进行定位（而不是视窗）

解决办法：1、react中，使用ReactDOM.createPortal将子元素portal到元素外边

　　　　　2、可以在body里面添加两个div，第一个div设置为内容容器，把需要translate的那部分都放到第一个div里面，然后把需要fixed定位的元素放到第二个div中；因为fixed定位是相对于视窗的和在文档中的位置没有关系，所以你可以直接把fixed定位的元素作为body元素的最后一个元素（防止被别的元素覆盖，或者设置一个高的z-index）

即：translate内不能包含fixed定位的元素，你就把fixed定位的元素移动到translate元素的外边

其他导致position：fixed布局失效

transform 属性值不为 none 的元素
perspective 值不为 none 的元素
在 will-change 中指定了任意 CSS 属性

原文地址：https://www.cnblogs.com/shuhaonb/p/12059010.html

时间： 2024-10-01 06:19:13

chrome 下 position：fixed失效（react）的相关文章

ios下position:fixed失效的问题解决

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

HTML兼容性不声明doctype，IE9标准模式下position:fixed定位失败，导致遮罩层（Mask Layer）显示在页面最下方，FF和Chrome正常

问题描述:ie9标准模式下,老系统中的页面很少有写doctype的,但是不写这个声明,浏览器对于文档的解析机制就不一样了,特别是对于table和样式中的width, height 为100%布局,以及高度自适应的实现方案有影响,不了解的可以自行百度先,那么不写的话,又想加1个遮罩层的效果,一般我们遮罩层是借助position绝对定位实现的,可以写fixed,也可以写absolute,设置为fixed的时候,文档没有doctype,就会导致遮罩层出现在文档最下方,而不是绝对定位的效果,切换为ie9

chrome下positon:fixed无效或抖动的解决办法

先来看一下我们要实现的效果我想这种效果大家都有实现过,或者说吸顶的效果和这差不多页面结构 js代码如下 /*吸顶*/ var $child = $("#child_3"); var $parent=$("#parent_3"); var w = $parent.width(); var tH = $child.offset().top; $(window).resize(function () {//响应 w = $parent.width(); $child.

IE6下position:fixed不支持问题及其解决方案

IE6有诸多奇葩,不支持position:fixed就是其中之一.所以在做一些比如固定在顶部或者底部或者固定元素的效果时需要考虑兼容IE6的这个问题.解决方案是用Ie6的hack. *html {/* 只有IE6支持 */ background-image: url(about:blank); background-attachment: fixed; /* 固定背景 */ } #box { /* 非IE6浏览器使用固定元素 */ position: fixed; top: 0; left: 0

position:fixed 失效

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

IE6下position:fixed不支持问题及其解决方式

IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html {/* 仅仅有IE6支持 */ background-image: url(about:blank); background-attachment: fixed; /* 固定背景 */ } #box { /* 非IE6浏览器使用固定元素 */ position: fixed; top: 0; lef

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

解决IE6浏览器下position:fixed固定定位问题

2010年4月15日像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设置这个CSS属性就能达到刚刚的需求.当其他浏览器都正常显示的时候,只有IE6不那么完美.该元素的位置是通过"left", "top",

ios上position:fixed失效问题

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