position:fixed 相对父元素定位
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 相对父元素定位的更多相关文章
- position:fix相对父元素定位
大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 【随笔】关于绝对定位absolute相对于父元素定位的问题
绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- position:fixed相对父级元素定位而不是浏览器
position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...
- margin-top影响父元素定位
写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...
- 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...
- position:fixed ,锚点定位不准确的问题
解决方案: 参照 stackoverflow 的做法,在主体内容前加一个暗锚 <div class="anmao" id="experts">< ...
随机推荐
- Intellij IDEA 热部署插件Jrebel激活
激活前请确保已经安装好了Jrebel插件,本文通过反向代理激活. 第一步:下载激活工具(即代理工具),下载地址:https://github.com/ilanyu/ReverseProxy/relea ...
- Jmeter接口测试(四)传递参数
参数设置 Jmeter 支持通过 查询字符串参数(Query String Parameters) 或者 Request body 请求体来传递参数. 1.get请求是普通键值对 get请求一般通过p ...
- 获取安卓app的appPackage和appActivity
1.需要配置好android的开发环境后,打开cmd命令窗口 2.在命令窗口中输入,adb logcat>D:/log.log,抓取日志 3.运行启动app 4.查看日志log 5.搜索日志的关 ...
- Git生成多个ssh key
在实际的工作中, 有可能需要连接多个远程仓库, 例如我想连接私有仓库.GitLab官网.GitHub官网, 那么同一台电脑就要生成多个ssh key: ssh-keygen -t rsa -C &qu ...
- centos 7 安装和基本配置
U盘安装centos 7 还是官方文档最准确. 下载centos https://docs.centos.org/en-US/centos/install-guide/downloading/ 制作安 ...
- 【数据结构系列】线段树(Segment Tree)
一.线段树的定义 线段树,又名区间树,是一种二叉搜索树. 那么问题来了,啥是二叉搜索树呢? 对于一棵二叉树,若满足: ①它的左子树不空,则左子树上所有结点的值均小于它的根结点的值 ②若它的右子树不空, ...
- 虹软2.0版本离线人脸识别C#类库分享
目前只封装了人脸检测部分的类库,供大家交流学习,肯定有问题,希望大家在阅读使用的时候及时反馈,谢谢!使用虹软技术开发完成 戳这里下载SDKgithub:https://github.com/dayAn ...
- 在windows和unbuntu上安装octave
windows安装octave 安装wiki Octave ftp库 从上述的库中可以找到对应的版本的octave的exe安装程序,或者是zip等的压缩包,建议直接下载对应系统的exe执行文件.安装. ...
- 关于在eclipse Oxygen 2017环境下spring3.2 asm的异常
今天在oxygen 2017下构建spring3.2+mybatis项目时,发生异常,大概是说无法解析我mapper.class文件,错误发生在core.asm中<unknow:source&g ...
- spring框架(3)— spring集合类的注入
1.Car.java package com.eniac.beans; public class Car { private String type; private String factory; ...