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. katalon系列十三:5.10新增跳过用例&命令行赋值全局变量

    Katalon Studio升级到5.10版本了,这次新增了2个很实用的功能:一.跳过用例在Listener中新增了跳过用例方法,Listener类似于JUnit4的annotation中的@Befo ...

  2. String、StringBuffer、StringBuilder有什么区别

    区别 先说说String和StringBuffer/StringBuilder: String是标准的不可变类,是一个字符串常量池,并且声明的对象在方法中是唯一存在的. StringBuffer/St ...

  3. [SHELL]查看端口,文件,服务关系的四个命令netstat,lsof,fuser,nmap

    一,netstat (1)简介 netstat主要是用来打印系统网络的状态信息,当输入netstat后,输出如下: 可以看出,netstat的输出分为两个部分组成: 一个是Active Interne ...

  4. mui搜索框 搜索点击事件

    <div class="mui-input-row mui-search"> <input type="search" class=" ...

  5. 微软职位内部推荐-Principal Group Program Manager

    微软近期Open的职位: Standard job title: Principal Group Program Manager Discipline: Program Management Prod ...

  6. 数据时代的的企业管理 记SAP商业同略会

    [PConline 资讯]在2012 SAP中国商业同略会城市论坛深圳站上,自SAP中国的萧洁云总裁和张志琦先生,对SAP中国的战略.SAP的技术战略,以及SAP对于行业趋势分析与媒体进行了沟通,对数 ...

  7. 移动端rem用法总结

    先介绍一下这个近年来突起的黑马 CSS3中新增的属性,从IE9开始兼容,手机端都兼容.参考的是<html>这个标签的font-size.rem中的r就是root根的意思.所以rem要比em ...

  8. 把字符串"3,1,2,4"以","分割拆分为数组,数组元素并按从小到大的顺序排列

    package com.wangcf; /** * 把字符串"3,1,2,4"以","分割拆分为数组,数组元素并按从小到大的顺序排列 * @author fan ...

  9. c# 消息机制

    1.windows系统是一个消息驱动的系统,windows本身有自己的消息队列. 系统传递消息给应用程序. 应用程序的消息机制:应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎. 2.c# ...

  10. mininet实验 动态改变转发规则实验

    写在前面 本实验参考 POX脚本设置好控制器的转发策略,所以只要理解脚本. mininet脚本设置好拓扑和相关信息,所以也只要理解脚本. POX脚本目前基本看不懂. 本实验我学会了:POX控制器Web ...