很多朋友问过我absolute与relative怎么区分，怎么用?我们都知道absolute是绝对 定位，relative是相对定位，但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对，相对又是相对于什么地方而言的呢?那他们又有什么样的特性， 可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

　　Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认 依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位， 位置将由TRBL决定。

　　一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为 原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。

　　Relative，CSS中的写法是：position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有 padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

　　有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数

详细讲解CSS中相对定位relative和绝对定位absolute的更多相关文章

  1. html/css中相对定位relative和绝对定位absolute的用法

    一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...

  2. 微信小程序 位置定位position详解，相对定位relative，绝对定位absolute相关问题

    一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...

  3. 相对定位relative与绝对定位absolute

    relative:相对定位,并没有脱离原来文档流,依然在原来的位置上,可以通过设置left,top,来设置自己的偏移量,但是它依然占据自己原来的位置,偏移的位置会遮盖其他的元素 absolute:绝对 ...

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

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

  5. 详细讲解nodejs中使用socket的私聊的方式

    详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...

  6. 第五节：详细讲解Java中的接口与继承

    前言 大家好,给大家带来详细讲解Java中的接口与继承的概述,希望你们喜欢 什么是接口(interface) 接口中的方法都是抽象方法,public权限,全是抽象函数,不能生成对象 interface ...

  7. 第四节：详细讲解Java中的类和面向对象思想

    前言 大家好,给大家带来详细讲解Java中的类和面向对象思想的概述,希望你们喜欢 类和面向对象 在Java中怎样理解对象,创建对象和引用:什么是引用,对于基础学习的同学,要深入了解引用.示例:Stri ...

  8. 第九节：详细讲解Java中的泛型，多线程，网络编程

    前言 大家好,给大家带来详细讲解Java中的泛型,多线程,网络编程的概述,希望你们喜欢 泛型 泛型格式:ArrayList list= new ArrayList(); ArrayList list= ...

  9. 第八节：详细讲解Java中的异常处理情况与I/O流的介绍以及类集合框架

    前言 大家好,给大家带来详细讲解Java中的异常处理情况与I/O流的介绍以及类集合框架的概述,希望你们喜欢 JAVA 异常 try...catch...finally结构的使用方法 class Tes ...

随机推荐

  1. javaweb中文中乱码分析与解决

    要想解决乱码的问题, 最好的办法是先弄清楚javaweb中数据传送的原理. 本文件将简单的讲解客户端的请求和服务器响应中编码的转换过程, 以及如何解决乱码的 问题. request(req):  se ...

  2. maven手动添加jar包到pom仓库

    此处以顺丰jar包为例: mvn install:install-file -Dfile=D:\TSBrowserDownloads\SF-CSIM-EXPRESS-SDK-V1.-\SF-CSIM- ...

  3. Flask基础(12)-->请求上下文和应用上下文

    请求上下文和应用上下文 请求上下文:可以简单理解为客户端与服务器之间数据交互请求的容器 请求上下文对象有:request.Session request:封装了HTTP请求的内容,针对的是http的请 ...

  4. CSS3相关编码规范

    一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin) ...

  5. node学习笔记(二)流和缓冲区

    内容 视频 第四章内容 菜鸟教程服务器 //复制文件 function de(x) { console.log(x); } var fs=require('fs'); fs.mkdir('stuff' ...

  6. 定一条数据用: => slot-scope属性,再显示对应的数据

    通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据: {{scope.row}} =>获取整行的数据 {{sco ...

  7. 两台CentOS6.5 在不同机器上互联

    准备工作 1.安装vmware及虚拟机centos6.5: 2.将安装好的centos6.5复制一份,在另一台机器上拷贝. 要进行不同机器上虚拟机的互相通信,需要用桥接模式进行互联.如下图,对vmwa ...

  8. AVL树、红黑树以及B树介绍

    简介 首先,说一下在数据结构中为什么要引入树这种结构,在我们上篇文章中介绍的数组与链表中,可以发现,数组适合查询这种静态操作(O(1)),不合适删除与插入这种动态操作(O(n)),而链表则是适合删除与 ...

  9. Java课程作业--参数求和

    一.设计思想: 这个程序是利用了参数进行输入,达到一次可以输入多个值的问题,同时输入数的个数没有限制(参数大于0个,如果为0个,应该输出提示请输入参数).本程序共分为步:1.利用参数行进行输入要加的数 ...

  10. dp复习　背包[礼物]

    [问题描述]人生赢家老王在网上认识了一个妹纸,然后妹纸的生日到了,为了表示自己的心意,他决定送她礼物.可是她喜爱的东西特别多,然而他的钱数有限,因此他想知道当他花一定钱数后剩余钱数无法再购买任何一件剩 ...