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里边设置相反方向的方位值会有什么现象?

  1. absolute绝对定位元素设置left+right,现象是拉伸

  2. 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 篇的更多相关文章

  1. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  2. css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

    支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertic ...

  3. css笔记 - 张鑫旭css课程笔记之 overflow 篇

    overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不 ...

  4. css笔记 - 张鑫旭css课程笔记之 line-height 篇

    一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定 ...

  5. css笔记 - 张鑫旭css课程笔记之 padding 篇

    [padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...

  6. css笔记 - 张鑫旭css课程笔记之 margin 篇

    margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器 ...

  7. css笔记 - 张鑫旭css课程笔记之 z-index 篇

    一.z-index语法.支持的属性值等 z-index: 在支持z-index的元素上, z-index规定了元素(包括子元素)的垂直z方向的层级顺序, z-index可以决定哪个元素覆盖在哪个元素上 ...

  8. css笔记 - 张鑫旭css课程笔记之 absolute 篇

    absolute地址 absolute绝对定位 绝对定位与浮动鲜为人知的兄弟关系 即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在 ...

  9. css笔记 - 张鑫旭css课程笔记之 border 篇

    border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比 透明border可以突破 ...

随机推荐

  1. 加密算法(对称加密)AES、DES (非对称加密)RSA、DSA

    目前主流的加密方式有:(对称加密)AES.DES        (非对称加密)RSA.DSA

  2. MATLAB:读取mat文件中物体的三维坐标,显示三维模型

    在MATLAB中建立一个脚本show3Dmat.m文件,编写代码: clc; clear; %%read 3D data load('E:\博士\深度学习与三维重建\代码实现\3DRecGAN\X_Y ...

  3. 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程序 ...

  4. Objective-C语法之扩展(Extension)的使用

    Objective-C 2.0增加了Class Extension用于解决两个问题: 可声明私有可读写的属性,而在类的声明中是同名的公开只读属性,从而来支持公开只读.私有可读写的属性 可声明私有方法: ...

  5. vue学习起步,vue环境安装

    vue安装的前提是安装了nodejs 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack c ...

  6. 在ListView中使用GridView, Style这样写:

    参考:http://msdn.microsoft.com/zh-cn/library/vstudio/ms788747.aspx 需求,自定义ListView中的滚动条 这岂不是很简单?刷刷刷写完了, ...

  7. WebGL 颜色与纹理

    1.纹理坐标 纹理坐标是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹理颜色.WebGL系统中的纹理坐标系统是二维的,如图所示.为了将纹理坐标和广泛使用的x.y坐标区分开来,WebGL使用s和t ...

  8. qt creator如何实现转到槽功能

    ui_mainwindow.h .

  9. Java正则表达式的使用和详解(下)

    1.常用正则表达式 规则 正则表达式语法   一个或多个汉字 ^[\u0391-\uFFE5]+$  邮政编码 ^[1-9]\d{5}$ QQ号码 ^[1-9]\d{4,10}$  邮箱 ^[a-zA ...

  10. MongoDB 连接池

    http://www.cnblogs.com/huangfox/archive/2012/04/01/2428947.html http://www.iteye.com/problems/97350