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. CSS3-边框(border-radius、box-shadow、border-image)

    CSS3中的边框属性:border-radius.box-shadow.border-image 圆角:border-radius 使用 CSS3 border-radius 属性,你可以给任何元素制 ...

  2. 奈奎斯特采样定理(Nyquist)

    采样定理在1928年由美国电信工程师H.奈奎斯特首先提出来的,因此称为奈奎斯特采样定理. 1933年由苏联工程师科捷利尼科夫首次用公式严格地表述这一定理,因此在苏联文献中称为科捷利尼科夫采样定理. 1 ...

  3. Day1-C-CF-1144A

    简述:给你一串字符,判断是否由连续字母构成且每个字符只出现一次 思路:用set直接储存,判断size和初末位置字母与size的关系即可 代码: #include<iostream> #in ...

  4. Python 之网络编程之socket(2)黏包现象和socketserver并发

    一:黏包 ###tcp协议在发送数据时,会出现黏包现象.     (1)数据粘包是因为在客户端/服务器端都会有一个数据缓冲区,     缓冲区用来临时保存数据,为了保证能够完整的接收到数据,因此缓冲区 ...

  5. 设计模式课程 设计模式精讲 16-4 代理模式Coding-动态代理

    1 代码演练 1.1 动态代理 2 疑难解答 2.1 动态代理invoke怎么执行的? 2.2 感觉这块理解的不是很好,下边有时间再看看 1 代码演练 1.1 动态代理 重点: 重点关注动态代理类 测 ...

  6. 实验一 git代码版本管理

    实验目的 1. 了解分布式系统版本管理的核心机理. 2. 熟练掌握 git 的基本指令和分支管理指令. 实验内容 1. 安装 git.2. 初始化配置 git,git init ,git status ...

  7. 【拒绝挂分】盘点蒟蒻ghy的各种sb错误

    1.m与n打反(打错) NOIPd2t2 50变15爽不爽啊.jpg 某次信心赛四道sb题里面最sb的一道 sort里面的m打成n 100变40爽不爽啊.jpg(还有40我真的谢谢您了 2.没开lon ...

  8. R语言 使用rmarkdown写代码

    1.如果是第一次新建markdown文件,需要在有网的条件下,因为要下载一个包才能用markdown 2.为什么使用rmarkdown 使用markdown不仅可以边调试边运行,还可以一次性将所调试好 ...

  9. python异常处理(学习)

    异常处理可以保证程序在恶劣的环境也能运行,或者给用户相关的提示 如下是运行异常的情况 如无异常 也可以创建异常处理类型

  10. PHP连数据库生成数据字典

    <?php /** * 生成mysql数据字典 */ header("Content-type:text/html;charset=utf-8"); // 配置数据库 $da ...