position：absolute这个是绝对定位；
是相对于浏览器的定位.
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置.
position：relative是相对定位,是相对于前面的容器定位的.这个时候不能用top left在定位.应该用margin.
比如：

 
 

当1固定了位置.1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边,距离120px

CSS里面position：relative与position：absolute 区别的更多相关文章

  1. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  2. 通过案例理解position:relative和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

  3. position:relative和position:absolute的差别及使用方法

    这几天在做项目时遇到做选项卡的功能时,标题和内容区域的背景颜色不同.且须要选到当前标题时,此标题以下会出现下边框及小三角边框,这样就会超出标题背景颜色需覆盖以下内容区域.这时就须要用到potition ...

  4. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  5. css里面position:relative与position:absolute的区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  6. position: relative 和 position: absoution 的详解

    position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...

  7. css中postion的fixed与absolute区别详解

    fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...

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

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

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

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

  10. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

随机推荐

  1. Linux(Centos7) 设置静态IP

    关于虚拟机 这里使用Centos7为例,因为linux是安装在在虚拟机中,这里先看一下虚拟机的网络适配器: 这里我使用的NAT模式,接着配置虚拟机的虚拟网络: 这里主要看一下VMnet8的设置: 这里 ...

  2. Linux系统安装,组成及开关机

    Linux系统安装,组成及开关机 系统安装 swap分区用于实现虚拟内存,文件系统类型是swap. /分区用于存放包括系统程序和用户数据在内的所有数据,文件系统类型是ext4. 系统组成 Linux内 ...

  3. LTTng

    Waiting for dig... http://frederic-wou.net/lttng/

  4. xmpp之配置Xcode（1）

    介绍 ios上的XMPPFramework你能够在Xcode/iPhoneXMPP 目录找到,它只是实现了XMPP的一小部分功能. 下面主要介绍在开发XMPPFramework ios应用之前的配置工 ...

  5. keepalived(nginx的高可用)安装文档

    1. 安装环境 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y install popt-devel yu ...

  6. python3爬虫-通过requests获取安居客房屋信息

    import requests from fake_useragent import UserAgent from lxml import etree from http import cookiej ...

  7. this与const

    在普通非const成员函数中,this是const指针,而在const成员函数中,this是const对象的const指针. class Foo { Foo& get_self1(void) ...

  8. Andrew and Chemistry(树的同构)

    Andrew and Chemistry(树的同构) 题链 将一棵树转化为最小表示法,将此时的树哈希一下,同时用map进行标记,就可以判断树是否存在同构 #include <map> #i ...

  9. 百练2815:城堡问题（DFS）

    描述 1 2 3 4 5 6 7 ############################# 1 # | # | # | | # #####---#####---#---#####---# 2 # # ...

  10. RabbitMQ-基本概念(一)

    整体架构模型 Producer 消息生产者,生产者创建消息然后发布到RabbitM中,消息一般包含2个部分 消息体(payload)和标签 消息体就是带有业务逻辑结构的数据,消息标签用来表述这条消息, ...