如何让position fixed不再基于浏览器窗口定位
position:fixed默认是相对浏览器定位的。
就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化;
MDN对position: fixed有一个注释:
当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。
也就是说如果想让fixed不相对浏览器定位,只要给它的随便哪个祖先设上非none的transform,问题就解决了。这祖先可以是static的,也就是说随便哪个祖先都行。比如说给body设一个transform: translateZ(0);,测试有效。
不过想让 position:fixed 的元素相对于父元素定位,应该改成 absolute 以及父元素 relative。而不是让 fixed 干不应该干的事。相对父元素定位需要position fixed吗?难道这是想搞事情啊!脱离党指导路线的都不是什么好路子!
而且transform会对定位产生副作用,建议尽量避免一起使用。
如何让position fixed不再基于浏览器窗口定位的更多相关文章
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- position:fixed相对父级元素定位而不是浏览器
position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...
- position fixed 相对于父级定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [z]兼容IE6的相对于浏览器窗口定位
http://blog.uedsc.com/css-position.html http://www.w3cmm.com/notepad/css-position.html http://sofish ...
- position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
- position:fixed not work?
问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- 移动Web开发,4行代码检测浏览器是否支持position:fixed
不废话,直接上代码 var div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed; ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
随机推荐
- java架构之路-(mysql底层原理)Mysql索引和查询引擎
今天我们来说一下我们的mysql,个人认为现在的mysql能做到很好的优化处理,不比收费的oracle差,而且mysql确实好用. 当我们查询慢的时候,我会做一系列的优化处理,例如分库分表,加索引.那 ...
- 大文件SQl脚本怎么还原以及SQlsqlserver怎么全自动备份数据库
1:导出的SQl脚本文件通常大于100M左右就会还原不了,不是报错就是说系统文件找不到(sql脚本是直接拖进来的,不存在路径的问题). 2:CMD 使用 OSQL命令或者Sqlcmd命令都是可以解决的 ...
- Linux软件安装——安装软件的命令
Linux软件安装——安装软件的命令 摘要:本文主要学习了如何在Linux系统中安装.更新.卸载软件. rpm命令 rpm命令用来在Linux系统上进行软件的安装. 基本语法 安装命令: rpm -i ...
- Java生鲜电商平台-物流动态费率、免运费和固定运费设计与架构
Java生鲜电商平台-物流动态费率.免运费和固定运费设计与架构 说明:物流配送环节常见的有包邮,免运费,或者偏远地区动态费率,还存在一些特殊的情况,固定费率,那么如何进行物流的架构与设计呢? 运费之困 ...
- Windows中将nginx添加到服务(转)
下载安装nginx http://nginx.org/en/download.html 下载后解压到C盘 C:\nginx-1.14.0 添加服务 需要借助"Windows Service ...
- 实战讲解XXE漏洞的利用与防御策略
现在许多不同的客户端技术都可以使用XMl向业务应用程序发送消息,为了使应用程序使用自定义的XML消息,应用程序必须先去解析XML文档,并且检查XML格式是否正确.当解析器允许XML外部实体解析时,就会 ...
- 【转】Linux上安装rz和sz命令
简介 lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZModem文件传输协议 windows 需要向ce ...
- Python 安装第三方库,pip install 安装慢,安装不上的解决办法
今天来说一下,有些刚刚接触python的朋友,在使用pip install安装python 第三方库的过程中 会出现网速很慢,或者是安装下载到中途,停止,卡主,或者是下载报错等问题.如下图: 还有一些 ...
- 章节十四、3-执行JavaScript命令
一.网页页面都是由html+css和javaScript组成的,如果页面中没有javaScript的存在,就不会有操作动作的执行,例如页面上你点击的按钮或者链接都离不开javaScript.(这一节不 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...