关于absolute 和 relative 定位的定义
absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们中国人的理解观念,这个其实是相对定位,是脱离文档流的。用了abolute属性,原有float属性将失效;
relative的英文意思是相对的意思,实际上是相对于对象当前位置的定位。而且是不脱离文档流的,就算用top、lef、bottom、right或margin将其移动位置,它也会在原来的文档流中占有自己实际大小的一块位置。
说白了,absolute是相对于父对象定位,relative是相对于当前位置定位!就是这么简单
关于absolute 和 relative 定位的定义的更多相关文章
- focus、click、blur、display、float、border、absolute、relative、fixed
onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占 ...
- 定位 absolute和relative比较
absolute:脱离原来位置定位.是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对文档进行定位 relative:保留原来位置进行定位,相对于自己原来的位置进行定位 下面举两个例 ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- position属性absolute和relative理解
relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- position的absolute与fixed,absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...
- CSS中position的absolute和relative用法
static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元 ...
- css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
随机推荐
- Azure Web Site 之 利用Azure Web site 发布网站
由于经常混迹于MSDN Azure论坛,少不了和一些外国朋友打交道.有的时候觉得还是有一些东西可以写出来与外国友人们分享下的, 所以就用一个开源项目建了一个英文blog项目. 在发布的时候,首选的就是 ...
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- 从svn资源库目录checkout出maven项目方法
从svn资源库目录checkout出maven项目方法,如下图所示:
- Microsoft.CompactFramework.CSharp.targets not found
今天打开VS2008的智能设备项目,报以下错误,应该是文件找不到了. The imported project "C:\WINDOWS\Microsoft.NET\Framework\v3. ...
- Breeze库API总结(Spark线性代数库)(转载)
导入 import breeze.linalg._ import breeze.numerics._ Spark Mllib底层的向量.矩阵运算使用了Breeze库,Breeze库提供了Vector/ ...
- 什么是Unicode letter
起因:从一段代码说起 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
- thinkphp相关总结
1.model层验证多个字段唯一性 protected $_validate = array( array('appid,awardid', '', '不能重复添加', self::MUST_VALI ...
- 类型转换bin()、chr()、ord() 、int()、float()、str()、repr()、bytes()、tuple(s )、 list(s ) 、unichr(x ) 、 ord(x ) 、 hex(x ) 、 type()数据类型查询
1.bin() 将整数x转换为二进制字符串,如果x不为Python中int类型,x必须包含方法__index__()并且返回值为integer: 参数x:整数或者包含__index__()方法切返回值 ...
- How To Install Java on CentOS and Fedora
PostedDecember 4, 2014 453.8kviews JAVA CENTOS FEDORA Introduction This tutorial will show you how ...
- GridView数据绑定
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...