position中Relative和Absolute 详解

基本说明请参照w3cshcool,这里仅谈我个人的理解。

relative:
css教程中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以body的原始点为原始点,配合trbl进行定位,当父级内有padding等css属性时,当前级的原始点则参照父级内容区的原始点进行定位

        1,用left,top,bottom,right相对于static的位置的偏移

        2,设置为relative的div里的所有元素都相对于该div定位

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

        1,元素就脱离了文档【即在文档中已经不占据位置了】

        2,从父级元素开始,相对于第一个非static的元素定位,若都是static,则相对于浏览器定位

        3,若不设置top,buttom,left,right,只有设置了的方向会行使absolute的功能

 

时间: 2024-11-09 15:52:06

position中Relative和Absolute 详解的相关文章

PHP也能干大事之PHP中的编码解码详解

PHP也能干大事之PHP中的编码解码详解        这篇文章主要介绍了PHP也能干大事之PHP中的编码解码详解,本文讲解了ASCII编解码.URL编解码.Base64编解码.HTML实体编解码.二进制.八进制.十进制.十六进制相互转换等内容,需要的朋友可以参考下 写在前面 PHP也能干大事是我总结的PHP语法特性及相关函数类库的经典用法,并不一定是真正能实现四两拨千斤的功效,但是掌握这些方法,可以在你的工作和学习上有一些帮助,希望大家能集思广益,将<PHP也能干大事>丰富得更精彩!转载请注

Android中Service(后台服务)详解

  这篇文章主要介绍了Android中Service(后台服务)详解,本文讲解了Service的概念.作用.生命周期.启动方式和代码实例等内容,需要的朋友可以参考下 1.概念: (1).Service可以说是一个在后台运行的Activity.它不是一个单独的进程,它只需要应用告诉它要在后台做什么就可以了. (2).它要是实现和用户的交互的话需要通过通知栏或者是通过发送广播,UI去接收显示. (3).它的应用十分广泛,尤其是在框架层,应用更多的是对系统服务的调用. 2.作用: (1).它用于处理一

Excel表格中视图功能相关详解

  Excel表格中视图功能相关详解          一.同时查看两个excel文件 打开两个excel文件 视图 - 全部重排 - 垂直/水平并排 二.同时查看同一个excel文件的两个excel工作表 视图 - 新建窗口 - 全部重排 - 垂直/水平并排 三.同时查看同一个表的两个不同区域 1.第一行不动(向下翻看excel表时,让一个表格的第一行固定不动) 视图 - 冻结窗格 - 冻结首行 2.同时查看两个动态区域 选取某一行 - 视图 - 拆分,可以把界面拆分成上下两部分,和冻结不同的

JavaScript中的Promise使用详解

  这篇文章主要介绍了JavaScript中的Promise使用详解,promise对象是JS进阶学习中的重要知识点,需要的朋友可以参考下 许多的语言,为了将异步模式处理得更像平常的顺序,都包含一种有趣的方案库,它们被称之为promises,deferreds,或者futures.JavaScript的promises ,可以促进关注点分离,以代替紧密耦合的接口. 本文讲的是基于Promises/A 标准的JavaScript promises.[http://wiki.commonjs.org

Linux bash Shell中的变量类型详解

  这篇文章主要介绍了Linux bash Shell中的变量类型详解,变量类型共分为本地变量.局部变量.环境变量.位置变量和特殊变量等,需要的朋友可以参考下 在Linux系统中进行日常运维或者是编写脚本时,变量是再熟悉不过的了,但这些变量都有哪些类型,具体的用法又有哪些差异呢?本文整理分享给大家: 一.bash变量类型: 本地变量 局部变量 环境变量 位置变量 特殊变量(内置) 二.本地变量: varname=value:作用域为整个bash进程可以使用; 变量命名规范: 1. 只能含字母.数

Python中的下划线详解

  这篇文章主要介绍了Python中的下划线详解,本文讲解了单个下划线直接做变量名.单下划线前缀的名称.双下划线前缀的名称等内容,需要的朋友可以参考下 这篇文章讨论Python中下划线_的使用.跟Python中很多用法类似,下划线_的不同用法绝大部分(不全是)都是一种惯例约定. 一. 单个下划线直接做变量名(_) 主要有三种情况: 1. 解释器中 _符号是指交互解释器中最后一次执行语句的返回结果.这种用法最初出现在CPython解释器中,其他解释器后来也都跟进了. 代码如下: >>> _

Python中的默认参数详解

  这篇文章主要介绍了Python中的默认参数详解,本文讲解了默认参数的基本原理.如何正确地使用可变参数等内容,需要的朋友可以参考下 文章的主题 不要使用可变对象作为函数的默认参数例如 list,dict,因为def是一个可执行语句,只有def执行的时候才会计算默认默认参数的值,所以使用默认参数会造成函数执行的时候一直在使用同一个对象,引起bug. 基本原理 在 Python 源码中,我们使用def来定义函数或者方法.在其他语言中,类似的东西往往只是一一个语法声明关键字,但def却是一个可执行的

AngularJS中的过滤器使用详解

  这篇文章主要介绍了AngularJS中的过滤器使用详解,过滤器是AngularJS中处理文本的一个非常有用的功能,需要的朋友可以参考下 过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. 小写过滤器 添加小写的过滤器,使用管道符的表达式.在这里添加小写过滤器,以小写字母打印学生姓名. ? 1 2 3 Enter first name:<input type="text" ng-model="student.firstNam

Lua中的逻辑运算符使用详解

  这篇文章主要介绍了Lua中的逻辑运算符使用详解,是Lua入门学习中的基础知识,需要的朋友可以参考下 下表列出了所有的Lua语言支持的逻辑运算符.假设变量A持有true,而变量B持有false: 示例 试试下面的例子就明白了所有的Lua编程语言提供的逻辑运算符: 代码如下: a = 5 b = 20 if ( a and b ) then print("Line 1 - Condition is true" ) end if ( a or b ) then print("L