relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。如果它之前的元素也为relative并有偏移,则两个偏移不想加,relative只在它原本所在位置上进行偏移。relative 不脱离文档流,也就是说relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变,所以不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移位置。

absolute:使用left,right,top,bottom等属性,相对于position样式值为relative最近祖先元素为参照.如果没有则以浏览器左上角(或者BODY元素)为参照。absolute的元素不仅位置改变了,同时也脱离了文档流。 其层叠通过z-index属性定义。

CSS的position属性:relative和absolute的更多相关文章

  1. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  2. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  3. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  4. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  5. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  6. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  7. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. CSS中position属性 (absolute,relative,static,fixed)

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

  10. CSS 浅析position:relative/absolute定位方式

    ## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...

随机推荐

  1. 电脑中安装了两个版本的jdk,后装的会把第一个覆盖掉

    电脑中之前装过一个1.8的jdk,后来工作需要又装了个1.7的,但是1.7的没有在系统环境变量中进行配置,而是通过setclasspath文件设置的,但是后来我发现,虽然没有改变系统环境变量中的JAV ...

  2. 用Navicat连接阿里云ECS服务器上的MySQL数据库,连接不上,并且报10060错误

    设置远程访问(使用root密码): grant all privileges on . to 'root' @'%' identified by '123456'; flush privileges; ...

  3. Python 基础之python运算符

    一.运算符 1.算数运算符 + - * / // % ** var1 = 5var2 = 8 #(1)  + 加res = var1 + var2print(res) # (2)  -  减res = ...

  4. Python 基础之面向对象初识与类的封装

    一.面向对象类的初识 1.类的定义 #三种方式:#1.class MyClass:    pass #2.推荐class MyClass():    pass #3.class MyClass(obj ...

  5. mysql学习指令

    mysql 用户管理和权限设置 参考文章:http://www.cnblogs.com/fslnet/p/3143344.html Mysql命令大全 参考文章: http://www.cnblogs ...

  6. rundll32.exe文件详解

    平时很常听到有些朋友说:呀,我系统的注册表启动项目有rundll32.exe,系统进程也有rundll32.exe,是不是病毒呀?这是对rundll32.exe接口不了解,其实其原理非常简单,了解并掌 ...

  7. Press Key关键字用法

    语法:Press Key  locator   按键编码 press key关键字后面的键位对应ascii码实际为16进制格式 NULL = '\ue000'CANCEL = '\ue001'  # ...

  8. pytorch梯度下降法讲解(非常详细)

    pytorch随机梯度下降法1.梯度.偏微分以及梯度的区别和联系(1)导数是指一元函数对于自变量求导得到的数值,它是一个标量,反映了函数的变化趋势:(2)偏微分是多元函数对各个自变量求导得到的,它反映 ...

  9. CentOS6.9安装redis

    目录 Centos6.9下的Redis安装和配置(最简易方式) redis客户端登录方式 Centos6.9下的Redis安装和配置(最简易方式) 在服务器上创建一个目录/service,然后下载re ...

  10. LCS(Longest Common Subsequence)最长公共子序列

    最长公共子序列(LCS)是一个在一个序列集合中(通常为两个序列)用来查找所有序列中最长子序列的问题.这与查找最长公共子串的问题不同的地方是:子序列不需要在原序列中占用连续的位置 .最长公共子序列问题是 ...