一、relative对absolute的限制作用

1、限制left/top/right/bottom定位。absolute默认是在也没的左上角，当父类设定为relative,absolute就被限制在父类的区域内，设定top/left/right/bottom时，起始点为父类的左上角

2、限制z-index层级。页面中的俩个absolute的z-index不同且不为auto，有各自的层级，当这两个absolute的父类都有relative的时候，它们的层级就依赖于父类的relative的z-index

3、限制在overflow下的效果。默认情况下，overflow:hidden是无法限制absolute的，当加上relative时，才能被限制住；当overflow:auto或overflow:scoll时，里面有滚动条，absolute是不会随滚动条移动的，这时就需要加上relative

二、relative只能限制fixed的z-index层级

三、relative和定位

1、relative的定位和偏移都是相对于自身所在的位置

2、relative的定位不会影响其他元素的定位。作用：可以用来自定义拖拽功能

四、relative最小化影响原则

指的是尽量降低relative属性对其他元素或布局的潜在影响

1、尽量避免使用relative

2、必须使用的时候，relative也要最小化

参考地址：http://www.imooc.com/learn/565

css之relative的更多相关文章

  1. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  2. css的relative和position探究

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  3. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  4. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  5. css的relative与absolute（一）

    relative与absolute是position的两个值,本文对这两个值得关系进行了一个小实验 实验一: 首先定义了两个div元素,代码如下所示: <!doctype html> &l ...

  6. css position: relative，absolute具体解释

    关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解.以下说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常 ...

  7. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

  8. CSS之 relative 特性

    1. 自身特性: 如left,right,top,bottom定位都是相对于自身位置定位. 当left与right同时存在,lfet生效. 当top与bottom同时存在,top生效. 无侵入,保留原 ...

  9. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

随机推荐

  1. mysql 案例 ~ 表空间迁移数据与数据导入

    一  简介:mysql5.6+的表空间传输二 目的:复制数据到另一个表三 步骤   1 create table b like a ->创建一个空表   2 alter table b disc ...

  2. 《Java编程思想第四版》附录 C Java 编程规则

    附录 C Java 编程规则 本附录包含了大量有用的建议,帮助大家进行低级程序设计,并提供了代码编写的一般性指导: (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符 ...

  3. WIN10 困扰多时的屏幕亮度 终于可以调节了-完美 -更新2018年2月28日

    总结:很多问题是自己认知不够造成的,  -- 问题解决在  修复经历二,可直接跳过去看  修复经历二. 首先看你屏幕亮度是集成还是独立显卡决定的(一般是集成),所以下面 修复经历一折腾独立显卡驱动没什 ...

  4. python，<一>读取文件open()

    在实际操作中,我们经常会读取文件,这个时候python为我们提供了一个open()的方法,供我们读取文件,通过help(open),我们可以获取open的方法 f.close()关闭读取 f.read ...

  5. 管理并行SQL执行的进程

    本节介绍的并行执行功能可用于Oracle数据库企业版 本节介绍如何管理SQL语句的并行处理.在此配置中,Oracle数据库可以将处理SQL语句的工作分为多个并行进程. 许多SQL语句的执行可以并行化. ...

  6. 使用@RequestBody将请求体映射到Action方法参数中

    @PostMapping("/user") public User create(@RequestBody User user){ System.out.println(user. ...

  7. 【leetcode】557. Reverse Words in a String III

    Algorithm [leetcode]557. Reverse Words in a String III https://leetcode.com/problems/reverse-words-i ...

  8. Linux系统启动那些事—基于Linux 3.10内核【转】

    转自:https://blog.csdn.net/shichaog/article/details/40218763 Linux系统启动那些事—基于Linux 3.10内核 csdn 我的空间的下载地 ...

  9. Delphi 的 FireDAC 连接管理与配置过程

    Delphi 的 FireDAC 连接管理与配置过程: 使用 FireDAC 技术连接 数据库,主要是使用  TFDConnection ,其中有一参数是选择  ConnectionDefFile. ...

  10. js知识巩固

    1.数组操作中使用splice和slice进行删除数组的区别! splice会对原数组进行操作,返回的是被删除元素组成的数组,原数组会被进行改变即变成删除后的数组,用于删除列表中的元素,arr.spl ...