css笔记 - 张鑫旭css课程笔记之 relative 篇
relative 对 absolute的限制作用
限制left/top/right/bottom(方位值)定位
限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative,方位值就会相对于这个父元素,所以说relative限制absolute的方位值目标对象。
限制z-index层级
限制描述:
父元素没有relative的时候,绝对定位元素的z-index值越大,则层级越高。
但是如果两个绝对定位元素的父元素都有relative控制,则绝对定位元素自身的层级再高也没用,还是受其父元素的限制。只有带着relative的父元素的层级越高,绝对定位元素的层级才越高。
之所以relative能够限制absolute,是因为z-index为具体数值。当z-index为数值的时候,就会创建层叠上下文。
也就说,只要z-index为数值,就会创建层叠上下文。
在ie7+以上的浏览器中,如果z-index值为auto,那么relative就限制不了absolute的层级,这种情况下,带有absolute的元素具体层级还是看其自身不看父元素。
z-index:auto;相当于z-index:0;的效果。
ie6、7中就算z-index为auto,也会创建层叠上下文。即,在ie6、7中,只要有z-index就会创建层叠上下文。(这是一个bug)
限制absolute超越overflow的现象
限制描述:
absolute又一个特性,就是设置absolute的元素,如果不设置方位值,父元素也不设置relative,那么父元素的overflow:hidden;对这个absolute元素就没有作用。
当然,如果父元素设置了relative和overflow,那么即使子元素设置了absolue,他也会超出父元素被隐藏。
relative对fixed的影响
只能限制fixed的层级,其他对于absolute限制的两条,即方位值和overflow的限制不存在。
relative和自身定位
1.相对自身特性: relative定位的目标是自身,相对于自身。
postion: relative;
left: 0;
top: 0;
则不会发生位移。
2.无侵入特性: 不会脱离文档流,不会影响其他元素布局。自己移来移去,其他元素不会位移。
relative与方位值
relative里边设置相反方向的方位值会有什么现象?
absolute绝对定位元素设置left+right,现象是拉伸
relative相对定位元素设置left+right,现象是斗争
斗争现象:
两个之间,只有一个起作用。
如果设置了left和right,则只有left起作用
如果设置了top和bottom,则只有top起作用
relative和层级
relative可以提高元素的层级(层叠上下文)
普通的两个元素,如果发生重叠,是后边的元素覆盖前边的元素
前边的元素设置relative+z-index,则可以反过来覆盖后边的元素
新建层叠上下文
当z-index的值为数值的时候,就会新建层叠上下文。包括ie6、7
当z-index为auto的时候,
ie8及以上现代浏览器不会新建层叠上下文。
ie6、7会新建层叠上下文。
relative的最小化影响原则
即,尽量降低relative属性对其他元素或布局的潜在影响
1.尽量避免使用relative:很多时候只设置一个position:absolute即可,因为absolute不设置方位值的时候,只是在原有位置腾空而起,不会发生位移,根本没必要设置父元素的相对定位。
2.relative最小化原则:比如如果absolute元素需要一个relative的父元素,可以单独建立一个div,就是设置position:relative用。
css笔记 - 张鑫旭css课程笔记之 relative 篇的更多相关文章
- css笔记 - 张鑫旭css课程笔记之 float 篇
https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...
- css笔记 - 张鑫旭css课程笔记之 vertical-align 篇
支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertic ...
- css笔记 - 张鑫旭css课程笔记之 overflow 篇
overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不 ...
- css笔记 - 张鑫旭css课程笔记之 line-height 篇
一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定 ...
- css笔记 - 张鑫旭css课程笔记之 padding 篇
[padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...
- css笔记 - 张鑫旭css课程笔记之 margin 篇
margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器 ...
- css笔记 - 张鑫旭css课程笔记之 z-index 篇
一.z-index语法.支持的属性值等 z-index: 在支持z-index的元素上, z-index规定了元素(包括子元素)的垂直z方向的层级顺序, z-index可以决定哪个元素覆盖在哪个元素上 ...
- css笔记 - 张鑫旭css课程笔记之 absolute 篇
absolute地址 absolute绝对定位 绝对定位与浮动鲜为人知的兄弟关系 即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在 ...
- css笔记 - 张鑫旭css课程笔记之 border 篇
border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比 透明border可以突破 ...
随机推荐
- 加密算法(对称加密)AES、DES (非对称加密)RSA、DSA
目前主流的加密方式有:(对称加密)AES.DES (非对称加密)RSA.DSA
- MATLAB:读取mat文件中物体的三维坐标,显示三维模型
在MATLAB中建立一个脚本show3Dmat.m文件,编写代码: clc; clear; %%read 3D data load('E:\博士\深度学习与三维重建\代码实现\3DRecGAN\X_Y ...
- 7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库
7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库 三种方法 rpm工具----->类型windows下的exe程序 ...
- Objective-C语法之扩展(Extension)的使用
Objective-C 2.0增加了Class Extension用于解决两个问题: 可声明私有可读写的属性,而在类的声明中是同名的公开只读属性,从而来支持公开只读.私有可读写的属性 可声明私有方法: ...
- vue学习起步,vue环境安装
vue安装的前提是安装了nodejs 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack c ...
- 在ListView中使用GridView, Style这样写:
参考:http://msdn.microsoft.com/zh-cn/library/vstudio/ms788747.aspx 需求,自定义ListView中的滚动条 这岂不是很简单?刷刷刷写完了, ...
- WebGL 颜色与纹理
1.纹理坐标 纹理坐标是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹理颜色.WebGL系统中的纹理坐标系统是二维的,如图所示.为了将纹理坐标和广泛使用的x.y坐标区分开来,WebGL使用s和t ...
- qt creator如何实现转到槽功能
ui_mainwindow.h .
- Java正则表达式的使用和详解(下)
1.常用正则表达式 规则 正则表达式语法 一个或多个汉字 ^[\u0391-\uFFE5]+$ 邮政编码 ^[1-9]\d{5}$ QQ号码 ^[1-9]\d{4,10}$ 邮箱 ^[a-zA ...
- MongoDB 连接池
http://www.cnblogs.com/huangfox/archive/2012/04/01/2428947.html http://www.iteye.com/problems/97350