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. idea compare功能 之一次bug修复

    一次bug修复 最近开发完了一套单点系统,jenkins打包上传到服务器就出问题, 可以启动但是不能正常工作. 首先想到的是环境不一样, 于是把jenkins的jdk和maven都调整和本机大版本相同 ...

  2. 003--MySQL 数据库事务

    什么是事务? 事务是一组原子性的 SQL 查询, 或者说是一个独立的工作单元. 在事务内的语句, 要么全部执行成功, 要么全部执行失败. 事务的 ACID 性质 数据库事务拥有以下四个特性, 即 AC ...

  3. Windows 下在 Python (Anaconda) 中安装 Dlib 库

    0. 引言 介绍在 Windows  操作系统下,在 Python 的 Anaconda 集成环境中,安装 Dlib 库 : 对于不了解源码编译的,或者利用 cmake 方法失败的,可以尝试下此方法: ...

  4. Python科学计算库灬numpy

    Numpy NumPy是一个功能强大的Python库,主要用于对多维数组执行计算.Numpy许多底层函数实际上是用C编写的,因此它的矩阵向量计算速度是原生Python中无法比拟的. numpy属性 维 ...

  5. 剑指 Offer——和为 S 的两个数字

    1. 题目 2. 解答 由于数组是已经排好序的,我们可以定义两个指针,第一个指针指向第一个元素,第二个指针指向最后一个元素,然后求出这两个元素的和,与目标和进行比较.若小于目标和,第一个指针向前移动: ...

  6. windows8和windows server2012不联网安装.net 3.5(包括2.0和3.0)

    安装完win8后 发现系统默认没有安装.net3.5 如果使用在线更新的话需要很久才能完成,特别是当前的网速以及微软的服务器.速度很忙,其实我们利用win8的安装盘就可以不需要联网更新,而且几分钟就搞 ...

  7. arcgis--arcmap导出点的X,Y坐标

    arcmap操作的

  8. Android 中调用本地命令

    Android 中调用本地命令 通常来说,在 Android 中调用本地的命令的话,一般有以下 3 种情况: 调用下也就得了,不管输出的信息,比如:echo Hello World.通常来说,这种命令 ...

  9. 20172314 蓝墨云课堂实践ASL

    由于去跳啦啦操没有上课... 介绍 折半查找,又称作二分查找.这个查找的算法的特点,就是,要求数据要是有序的. 1 ,存储结构一定是顺序存储 2 ,关键字大小必须有序排列 然后,利用这组有序的数据之间 ...

  10. mysql 对表格加索引但原表格有重复数据

    1.把表中唯一数据搜索创建临时表,最后代替原先表. create table mmmmmm as SELECT * FROM meriadianannotation GROUP BY SeriesID ...