fixed不以body定位,相对于父级容器定位问题
经常在做一个页面的时候,希望一个元素不希望随着滚动条的滚动而动,这个时候就要用到fixed了
但是又不希望它根据整个窗口的左右两边定位(因为如果分辨率变小了,它与中间页面的距离就会变了)
希望达到的效果如下图所示
解决方法:只需要使用margin定位就可以了
如图,最先开始使用left,right进行定位
两个按钮是写在中间内部页面里面的
效果在不同分辨率下,与中间页面显示距离有差别
1920px分辨率下:
1366px分辨率下:
采用margin定位后,就会根据父级元素定位 (例子中的div .caseDetail类 ):
效果如下,无论何分辨率都以中间为定位,效果达成:
position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样:
不设置fixed元素的top,bottom,left,right,只设置margin来实现。
这种方法本质上fixed元素还是相当于窗口定位的,实现效果上是相对于父元素定位。
此外,position:fixed元素会受到父元素的影响,而出现不能以窗口进行定位:
1. 因为fixed元素并不总是相对于视窗进行定位的,父元素发生变换,也就是transfrom属性发生改变,如平移或旋转,会对固定定位的子元素产生影响 例子:固定定位不固定。
2. 如果父级元素的z-index的层次比同级元素低,就算fixed的z-index比父级高,也会被父级同级元素遮挡。
因此,position:fixed元素若要以窗口进行定位,最好是放在body根标签下
转载于:https://www.cnblogs.com/shimily/articles/11159019.html
fixed不以body定位,相对于父级容器定位问题相关推荐
- width:100%与绝对定位同时存在,偏移出父级容器
当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...
- 关于子元素的margin-top对父级容器无效
原理就是重新构建一个bfc盒子.如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为v ...
- vue 只在父级容器移动_Vue易遗忘的基础复习(二)
数据请求 Vue-resource请求 在Vue2.0之后已经被舍弃 2. fetch请求 因为传统 Ajax (指 XMLHttpRequest)存在一些令人头疼的问题:配置和调用方式非常混乱,而且 ...
- 父级容器relative子级容器absolutte时,如何设置子级窗口的宽度
<span style="color:#434343">当子容器的position设置为absolute或者fixed,如果元素的父容器为body的时候设置width为 ...
- 深入理解定位父级offsetParent及偏移大小
偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...
- javascript好文---深入理解定位父级offsetParent及偏移大小
前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
- 关于DOM基础:DOM子节点:childNodes、父节点:parentNode以及相对父级元素进行定位的offsetParent
DOM基础: 子节点:chrldNodes 父节点:parentNode 节点类型:nodetype offsetParent 基本概念 子节点:通俗的说就算一个父元素下面包着一个子元素.相当于一种& ...
- 如何获取元素在父级div里的位置_前端面试题--元素的BFC特性和实例
1.BFC 是什么? Block Formatting Contexts 块级格式化上下文.(不懂? 没关系,后文有介绍.) 2.为什么需要BFC? 在传统布局中出现的问题需要一种统一的解决方案. 首 ...
- offsetTop的父级元素
offsettop的offsetparent是最近的设置了定位属性的父级元素,如果父级元素都没有定位属性,那么offsetparent就是body并不是html标签. offsettop是指元素到设置 ...
- html dom取父节点jq,querySelector获得兄弟DOM元素 父级DOM元素 子级DOM元素
一.js定位兄弟,父级,子级元素 所有DOM方法var el = document.getElementById('xxx');var el = document.getElementByName(' ...
最新文章
- str.split() 与 str.split(‘ ‘)区别
- hiv实验室抗体筛查流程图_HIV自测都有哪些方法?结果准确么?
- mysql真的不能做搜索引擎吗?
- BZOJ 1878: [SDOI2009]HH的项链 | 莫队
- linux内核make执行过程
- 类python中高级用法
- 多线程编程学习笔记——线程池(二)
- iperf android使用方法,FW: 使用Iperf工具测试android系统网络wifi的吞吐量wifithrougput...
- Android实时直播,一千行java搞定不依赖jni,延迟0.8至3秒,强悍移动端来袭
- Android 工具
- 微软商店常见的几个问题
- Spark入门实战WordCount
- 基于FPGA板的音乐盒的设计
- 随便说说字符集和编码
- msconfig蓝屏_电脑设置MSConfig后重启就蓝屏,然后又自动重启,一直循环。。。怎么办啊啊啊啊啊啊...
- 超市选址c语言程序,谈谈超市选址的重要性
- 币圈进化,IFO、IHO玩法更高级,李笑来Candy“糖果”野望未来
- oracle12c 重启服务,OBIEE12c的服务启动/关闭命令
- Excel中回车换行
- 四足机器人(一)----MATLAB simulink对四足机器人物理建模
热门文章
- 转换整形数字为16进制字符串
- 类数组变量定义与初始化
- 阿里Seata的分布式事务实现
- MySQL呕血汇总--从基础到毕业【收藏篇】
- 28. 字符串的排列(C++版本)
- MySQL error(1449) The user specified as a definer ('usertest'@'%') does not exist
- java在线聊天系统_Java-在线聊天系统-非线程
- vue路由钩子函数(进入和离开钩子函数)
- 计算机集群用什么网络,什么是计算机系统集群?
- python数值类型和序列类型_Python基础 1数值类型 序列类型