第一讲     relative和absolute相煎关系

同源性

.position:relative

.position:absolute

限制作用

1.限制left/top/right/bottom定位

2.限制z-index层级

3.限制在overflow下嚣张气焰

1.限制定位，如果没有relative限制，元素定位absolute会可以在任何地方定位

2.限制层级 z-index 层级越高

3.限制超越overflow

relative与fixed

同源性

.position:relative

.position:fixed

限制作用

限制层级

第二讲 relative和定位

1.相对自身

left/top是相对于自身的。

2.无入侵

不会影响到原来的布局

无侵入定位的作用：自定义拖拽

top/buttom 和left/right对立属性同时存在时的表现

1.绝对定位是拉伸

2.相对定位是斗争

第三讲relative和层级

1.提高层叠上下文

第四讲relative的最小化影响原则

所谓relative的最小化影响原则指的是尽量降低relative属性堆其他元素或布局的潜在影响！

1.尽量避免使用relative

absolute定位不依赖relative

2.relative最小化

position:absolute的元素外层加一个标签

外层加position:relative 是不会占据任何空间的。

css深入理解relative的更多相关文章

  1. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  2. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  3. CSS深入理解之absolute（HTML/CSS）

    absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...

  4. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  6. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  7. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  8. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  9. CSS深入理解学习笔记之relative

    1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...

随机推荐

  1. logistic regression （逻辑回归） 概述

    :http://hi.baidu.com/hehehehello/blog/item/0b59cd803bf15ece9023d96e.html#send http://en.wikipedia.or ...

  2. Mybatis-generator自动生成

    第一步:导入架包 <build> <plugins> <plugin> <groupId>org.mybatis.generator</group ...

  3. RabbitMQ（一 初识）

    背景 在web开发过程中有遇到这样的情况:有一部分业务处理速度很慢,但它的结果对最终的返回没有影响,即使报错了,也不需要返回错误信息,只需要在另一个地方可以查询这部分业务的信息即可.例如:用户下单并成 ...

  4. webpack4基本配置

    1.npm init      生成package.json文件 2.npm install webpack webpack-cil --save-dev 安装webpack和webpack-cli ...

  5. windows服务器配置tomcat开机自动启动

    背景:最近在做服务器部署的工作,开始的时候都是手动将tomcat进行启动的,但是在遇到几次服务器重启后发现这样太过麻烦,影响项目运行,故事就从这里开始了. 我们的项目是使用spring-boot进行开 ...

  6. OCCI结果集(ResultSet)性能优化

    对于ResultSet类中的next()方法,默认是一次检索一行数据,及一次检索执行一次网络往返,当结果集数量大时,效率低:对此OCCI提供了几种改善方法,即:在一次网络往返返回多行数据. 1. 通过 ...

  7. 【c学习-4】

    //递归函数,调用自身 #include<stdio.h> int fibFunc(int n) { || n==){ ; }else{ )+fibFunc(n-); } } int ma ...

  8. scrapy--dytt(电影天堂)

    喜欢看电影的小伙伴,如果想看新的电影,然后没去看电影院看,没有正确的获得好的方法,大家就可以在电影天堂里进行下载.这里给大家提供一种思路. 1.dytt.py # -*- coding: utf-8 ...

  9. python__基础 : sys模块: sys.argv与sys.path

    sys模块中的 argv 保存的是当你运行一个py文件的时候给他传递进去的参数,如: import sys a = sys.argv print(a) # 当在命令行中调用这个py文件: > p ...

  10. yii2深入理解之内核解析

    一.前言 首先,yii2最为为数不多的PHP主流开源框架,受欢迎程度不亚于laravel和TP.个人认为,研究这些框架底层代码是非常有助于自身代码编程思想的提升和代码简化程度和质量的提升的. 那么,话 ...