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. android http json请求3种不同写法

    第一种: public static String invoke() {        String result = null;        try {             final Str ...

  2. Web打印控件Lodop实现证件套打

    第一次接触Lodop大概是在两年前了,那时候研究Lodop主要是为了验证它能不能实现打印时在不修改内容的前提下调整样式,结果是ok的,如今又一次接触它,是因为工作中需要使用它了,于是再一次碰面 Lod ...

  3. NHibernate Isession管理

    一个Session foreach (var item in favoriteId) { if (!string.IsNullOrEmpty(item)) { var favorite = _sess ...

  4. (个人)Linux基本指令收集

    1. 删除文件 其中 -r为向下递归删除    -f为强行删除,不做提示 rm -rf name 1   1 rm -rf name 2. 目录跳转指令 cd .. --跳转到上一级 cd ../ - ...

  5. MySQL删除数据库时的错误

    From: http://blog.csdn.net/mydeman/article/details/6843398 由于在9月30号粗暴地打断了一个导入进程,今天发现MySQL竟然不能启动了,只好卸 ...

  6. Jenkins的安装配置[转]

    Jenkins的安装配置 一.Jenkins简介 Jenkins 是一个可扩展的持续集成引擎.Jenkins可以帮我们将代码进行统一的编译打包.还可以放到tomcat容器中进行发布.简单来说就是我们通 ...

  7. 阴影锥(shadow volume)原理与展望

    转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...

  8. vue如何加入百度联盟广告

    在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js 直接复制粘贴到自己网页中便可显示对应广告. 在vue中由于都是vue组件,不支持直接在组件中加入这样一段一段的js代码, ...

  9. VC++关于UNICODE版本的开发

    关于UNICODE版本的开发 代码转换方案 概述 在VC6.0中,相应的有一些宏来代替ANSI的函数.宏或数据类型,这些宏在ANSI编译条件中处理字符串为单字节,而在UNICODE中处理字符串为双字节 ...

  10. java 实现类似于python requests包的Session类,自动管理cookie。

    1.在py中requests.post()和get()函数都是在那个函数内部里面自动生成了一个Session类的实例,所以requests,post和get函数要想干登陆后才能干的事情,需要添加coo ...