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. Django-建立网页

    进入cmd模式做 django-admin startproject helloworld创建一个project,并命名helloworld,新生成的文件结构如下   输入python manage. ...

  2. Siki_Unity_3-16_3D数学基础

    Unity 3-16 3D数学基础 任务0-1:课程介绍 课程大纲: 1. 3D数学介绍 2. Unity中的几种坐标系: 全局坐标系.屏幕坐标系等 坐标系间的坐标转换:比如屏幕坐标转换到世界坐标 3 ...

  3. javascript 强制转换规则 boolean 布尔值类型

    摘自 <你不知道的Javascript(中卷)> p55 一句话简述, 假值表以外的值均可以认为是真值,部分浏览器可能自定义了假值表以外的假值,并不符合W3C规范,需要特殊对待. 首先也是 ...

  4. Hyperledger Fabric 1.1 -- Policy 构成

    Policy 规则设计 本文主要是讲解一下在fabric中Policy的规则和写法,让大家有一个初步的认识,本文是基于fabric 1.1版本 Policy Type Policy Type 目前包括 ...

  5. 在Office 365 的如何给管理员赋予查看所有人邮箱的权限的Powershell

    连接至Office365 的Powershell Get-MsolUser -UserPrincipalName admin@***.partner.onmschina.cn //Get-MsolUs ...

  6. sqli-labs学习笔记 DAY1

    DAY 1 准备工作 安装phpstudy 安装配置sqli-labs 学习笔记 SQL语句的注释:–, # +在URL经过编码后会编码为空格 SQL语句的查询语句:SELECT column_nam ...

  7. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  8. c# 捕获一般获取不到的异常

    1.主函数入口加异常事件,代码例如: /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static void M ...

  9. C#的lock语句

    文章:lock 语句(C# 参考) 代码: using System; using System.Threading.Tasks; public class Account { private rea ...

  10. lintcode-445-余弦相似度

    445-余弦相似度 Cosine similarity is a measure of similarity between two vectors of an inner product space ...