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. Visual Studio设置字体及护眼背景色

    打开vs 菜单栏选择: 工具 -> 选择 -> 环境 -> 字体和颜色,如图所示 字体可以如上选择,背景色选择项背景,点击自定义,如下设置即可.

  2. mybatis按datetime条件查询,参数为时间戳时

    mybatis按datetime条件查询,参数为时间戳时,如果数据库为2018-1-1 20:22:10, 你的时间戳也为2018-1-1 20:22:10,但却没找到数据.可能是时差导致的.百度修正 ...

  3. Codeforces Round #503 (by SIS, Div. 2) D. The hat

    有图可以直观发现,如果一开始的pair(1,1+n/2)和pair(x, x+n/2)大小关系不同 那么中间必然存在一个答案 简单总结就是大小关系不同,中间就有答案 所以就可以使用二分 #includ ...

  4. 转载-找圆算法((HoughCircles)总结与优化-霍夫变换

    原文链接: http://www.opencv.org.cn/forum.php?mod=viewthread&tid=34096   找圆算法((HoughCircles)总结与优化 Ope ...

  5. 【IdentityServer4文档】- 使用密码保护 API

    使用密码保护 API OAuth 2.0 协议允许资源拥有者给客户端密码授权:客户端向令牌服务发送用户密码,以获取代表该用户的访问令牌. 该规范建议仅将“资源所有者密码授予”用于“可信”(或旧版)应用 ...

  6. 搜索引擎Elasticsearch REST API学习

    Elasticsearch为开发者提供了一套基于Http协议的Restful接口,只需要构造rest请求并解析请求返回的json即可实现访问Elasticsearch服务器.Elasticsearch ...

  7. 重写JdbcRDD支持Sql命名参数和分区

    Spark提供的JdbcRDD很不好用,没法指定命名参数,而且必须要提供两个Long类型的参数表示分区的范围,如果数据表没有long类型的字段或者不需要条件,那就不能用JdbcRDD了.这里我简单重写 ...

  8. freemarker中空值 null的处理 ?exists ?if_exists ?default(“”)

    exists:由空值测试运算符的引入,它被废弃了. exp1?exists 和 exp1??是一样的, ( exp1)?exists 和(exp1)??也是一样的. if_exists:由默认值运算符 ...

  9. oracle package pragma SERIALLY_REUSABLE(编译指示 告诉PL/SQL 的运行时引擎,在数据引用之时不要保持包级数据。)

    当包第一次被动调用时,将进行初始化:比如将包从硬盘上调到内存中来,放到系统全局工作区的共享缓冲池中,包的运行状态则被放到用户全局区的会话中存储区中,因此可以保证每个调用包的会话都拥有包的运行副本,当会 ...

  10. 让VS2013支持 C# 6.0 语法

    还未升级使用VS2015前,又想尝试使用C# 6.0的语言特性,可以用以下方法启用: VS2013中“工具”下选择“程序包管理器控制台”: 选中需要使用C# 6.0的项目,再敲入"Insta ...