position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样:

不设置fixed元素的top,bottom,left,right,只设置margin来实现。

这种方法本质上fixed元素还是相当于窗口定位的,实现效果上是相对于父元素定位。

此外,position:fixed元素会受到父元素的影响,而出现不能以窗口进行定位:

1. 因为fixed元素并不总是相对于视窗进行定位的,父元素发生变换,也就是transfrom属性发生改变,如平移或旋转,会对固定定位的子元素产生影响 例子:固定定位不固定

2. 如果父级元素的z-index的层次比同级元素低,就算fixed的z-index比父级高,也会被父级同级元素遮挡。

因此,position:fixed元素若要以窗口进行定位,最好是放在body根标签下

position:fixed 相对父元素定位的更多相关文章

  1. position:fix相对父元素定位

    大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...

  2. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  3. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  4. 【随笔】关于绝对定位absolute相对于父元素定位的问题

    绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...

  5. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  6. position:fixed相对父级元素定位而不是浏览器

    position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...

  7. margin-top影响父元素定位

    写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...

  8. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  9. position:fixed ,锚点定位不准确的问题

    解决方案: 参照 stackoverflow 的做法,在主体内容前加一个暗锚 <div class="anmao" id="experts">< ...

随机推荐

  1. Keil出错解决方法

    1.安装KEIL5后创建工程后出现这个报错 解决方法:打开下图目录的文件. Keil.STM32F1xx_DFP.pdsc文件是只读文件,必须将只读属性取消. 如下图所示,注释掉红色圆圈的哪一行,保存 ...

  2. Qt-QML-Canvas写个小小的闹钟

    先看下演示效果 大致过程 先绘制仪表盘,圆圈和刻度 剩下再绘制三个指针 最后在绘制上面的电子时钟 下面写源代码 import QtQuick 2.0 Rectangle { id:root ancho ...

  3. Jmeter接口测试(三)接口测试实践

    Jmeter 脚本编写一般分五个步骤: 1. 添加线程组 2. 添加 http 请求 3. 在 http 请求中写入接入 url.路径.请求方式和参数 4. 添加查看结果树 5. 调用接口.查看返回值 ...

  4. requests,unittest——多接口用例,以及需要先登录再发报的用例

    之前写过最简单的接口测试用例,本次利用unittest进行用例管理,并出测试报告,前两个用例是两个不同网页的get用例,第三个是需要登录才能访问的网页A,并在其基础上访问一个需要在A页面点开链接才能访 ...

  5. 谈谈javascript中的变量提升还有函数提升

    在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...

  6. c# 读取blob数据

    Stream stream = new MemoryStream(data); BinaryReader r = new BinaryReader(stream); int iRawImageWidt ...

  7. Alpha事后诸葛亮(团队)

    设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决用手机使没有指纹验证硬件的电脑可以利用指纹进行文件的加密.定义的很清楚.我们针对的是 ...

  8. 关于虚拟机安装mac os 教程详解

    环境搭建 VMware下载 百度云盘下载:链接:http://pan.baidu.com/s/1pK8RcLl 密码:5jc5 Unlocker208 百度云盘下载:链接:http://pan.bai ...

  9. 如何通过JAVA让DB2调用操作系统命令

    引言:我们在工作中常用操作系统命令和DB2命令对数据库做数据的导入.导出等操作,但是DB2不支持复合SQL 语句调用操作系统命令,因此我们需要利用 UDF 来执行SQL 中不可用的操作(例如:执行一些 ...

  10. openssl 加密算法 CA 介绍

    首先对于tftp服务的简要使用说明 (1)yum安装:tftp.tftp-server   (2)启动tftp CentOS 6 service xinetd restart chkconfig tf ...