作者：zccst

先看看手册

值

描述

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit

规定应该从父元素继承 position 属性的值。

1，relative

相对自己以前的位置偏移。

设置了top和left后，元素没有脱离文档流，仍然占用原来的位置。

2，absolute

脱离文档流，不再占用原来的位置。

1.首先不要用层叠这个词，容易把关系搞混 
2.absolute是受parentNode的position影响的 
  parentNode的position不是relative,那absolute的绝对对象是针对body的 
  parentNode的position  是relative,那absolute的绝对对象是针对parentNode的 
  也就是说absolute的绝对是有参照Node的 
3.对于复杂的position关系，要从parentNode的position的设置逐次的推下来 
4.relative的node的尺寸会影响parentNode的尺寸,也就是说relative即定位也占位 
  absolute的node的尺寸不影响parentNode的尺寸,也就是说absolute只定位不占位 
5.z-index只对absolute的node有效

几个更深入的问题：

问：如果即设置了left又设置了right，到底以哪个位置呢？

答：以left位置。同理top和bottom，以bottom为准。

例子：

<style type="text/css">

body {

 margin:0px;

 font-size: 9pt;

 line-height:12pt;

 margin-top: 150px;

 margin-left: 150px;

}

.box1 {

 background-color: #33CCFF;

 width: 200px;

 height: 200px;

}

.box2 {

 background-color: #CC99FF;

 height: 100px;

 width: 100px;

 position:relative;

 right:200px;/*此值总被认为是-left=-10px,所以你怎么改它都不会影响到布局*/

 left:10px;/*这里设定了两个定位值，但是它们是矛盾的，所以此时将以左边为准，如果是上下类型错误，则以上边定位数值为准*/  

}

</style>

<script type="text/javascript">  

</script>

</head>

<body>

<div class="box1">

  <div class="box2"></div>

</div>

　　

<style type="text/css">

<!--

*{

 margin:0px;

 padding:0px;

}

body {

 margin:10px;

 font-size: 13px;

}

a:link {

 color: #666;

 text-decoration: none;/*去除链接下划线*/

}

a:visited {

 color: #666;

 text-decoration: none;

}

a:hover {

 color: #F90;

}

h3 {

 color: #FFF;

 background-color: #F90;

 width: 100px;

 padding-top:3px;

 text-align:center;

}

ul {

 width: 300px;

 border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/

}

ul li {

 padding:5px;

 border-bottom: 1px solid #CCC;

 list-style:none;/*去除列表样式，这对于标准浏览很重要*/

}

a {

 position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/

 display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/

}

a div {

 display: none;/*初始化信息面板不显示*/

}

a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/

a:hover div {

 position: absolute;

 padding:5px;

 display:block;

 width: 245px;/*只给出宽度，高让它随内容多少自动调整*/

 left:150px;/*这是相对父级A的定位*/

 top: 20px;

 border: 1px solid rgb(91,185,233);

 background-color: rgb(228,246,255);

 z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

}

a img {

 width:80px;

 height:80px;

 border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/

 display:block;

 position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

 top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/

 left:5px;

}

dl {

 width: 160px;

 float:right;

 color: #999;

 line-height:20px;

}

dl dd span {

 font-weight: bold;

 color: #639;

}

-->

</style>

</head>  

<body>

<h3>最新单曲</h3>

<ul>  

<li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>爱的文身</dd>

 <dd><span>歌手:</span>黄圣依</dd>

 <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>

</dl></div></a></li>  

<li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>累了</dd>

 <dd><span>歌手:</span>阿信</dd>

 <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>

</dl></div></a></li>  

<li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>漫漫 慢慢</dd>

 <dd><span>歌手:</span>阿朵</dd>

 <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>

</dl></div></a></li>  

<li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>我怀念的</dd>

 <dd><span>歌手:</span>孙燕姿</dd>

 <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>

</dl></div></a></li>  

<li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />

<dl>

 <dd><span>歌名:</span>花期越来越近</dd>

 <dd><span>歌手:</span>后弦</dd>

 <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>

</dl></div></a></li>  

</ul>

对position的理解的更多相关文章

  1. CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...

  2. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  3. CSS之Position全面认识

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属 性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型 ...

  4. css3——position定位详解

    最近热衷于前端的开发,因为突然发现虽然对于网站.应用来说,功能处于绝对重要的地位,但是用户体验对于用户来讲同样是那么的重要,可以说是第一印象.最近在开发当中发现以前对于css中的position的理解 ...

  5. 解析position定位

    关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的? 在 ...

  6. 有关CSS 定位中的盒装模型、position、z-index的学习心得

    开始整体之前我需要说明两个概念: 第一个就是   一切皆为框  也就是说在HTML中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流:  一个网页可以看作是 ...

  7. 【干货分享】前端面试知识点锦集02（CSS篇）——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  8. CSS基础转载

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4 ...

  9. css基本知识框架图

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4 ...

随机推荐

  1. FZU Problem 1895 整除45问题（整除问题+字符串维护+优化）

    这个题有点烧脑啊,但是只要想清楚被45整除的数,肯定能被5和9整除,能被9整除的数各位加起来肯定是9的倍数,能被5整除的末尾是0或5. 然后dfs的过程稍微不太好懂,还有几个优化必须要注意.dfs的过 ...

  2. elasticsearch 手动控制分片分布

    elasticsearch可以通过reroute api来手动进行索引分片的分配.  不过要想完全手动,必须先把cluster.routing.allocation.disable_allocatio ...

  3. cocos2d Android.mk自动添加类

    打开Android.mk修改以下代码: LOCAL_SRC_FILES := hellocpp/main.cpp \ ../../Classes/AppDelegate.cpp \ ../../Cla ...

  4. myEclipse JSP 调用 IDL8.2 配置

    新安装了Envi5.0 IDL8.2,路径改动了,一些配置也要随之改动.现在总结一下,JSP调用IDL的配置. jar包配置,环境变量配置,dll配置,tomcat路径配置,tomcat运行选项配置, ...

  5. mac编译openssl扩展报错 openssl.c:44:10: fatal error: 'openssl/evp.h' file not found

    解决办法 brew link openssl --force 然后 ./configure --with-openssl --with-php-config=/usr/local/php/bin/ph ...

  6. iis7支持asp（访问页面，页面存在仍然提示404）

    1. win7下安装IIS时ASP一般被默认不选中的状态,因此需要打开IIS检查功能视图栏中是否存在ASP选项,若没有则需要从控制面板->程序和 功能->打开或关闭Windows功能-&g ...

  7. 苹果充电器USB端的识别电阻的设置

    苹果为充电器定义了3种充电电流,分别是0.5A/1A/2.1A.具体是由3种不同的电阻组合来实现的.当苹果的设备ipad,iphone,ipod接入USB口充电器时,会先检测USB D+和D-上的电压 ...

  8. SQL Server 2008登录问题(错误 233和18456)解决方法

    今天使用 SQLSERVER2008 先遇到了233 错误,后又遇到了 18456 ,从网上找到了解决方法,具体如下: 问题一 : 已成功与服务器建立连接,但是在登录过程中发生错取.(provider ...

  9. HDOJ 1319 Prime Cuts<数论>

    学会了不难.通过这道题学习了两点: 1:筛选法求素数. 2:在写比较长的程序的时候,给每个功能部分加上注释,思路会更清晰. 题意: 1.题目中所说的素数并不是真正的素数,包括1: 2.需要读懂题意,对 ...

  10. usb免驱动摄像头实验

    1.编译openwrt系统内核使它支持usb,进入在/openwrt/trunk上执行make menuconfig 2.1). 添加USB 相关支持Kernel modules —> USB ...