作者：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为准。

例子：

  1. <style type="text/css">
  2. body {
  3.  margin:0px;
  4.  font-size: 9pt;
  5.  line-height:12pt;
  6.  margin-top: 150px;
  7.  margin-left: 150px;
  8. }
  9. .box1 {
  10.  background-color: #33CCFF;
  11.  width: 200px;
  12.  height: 200px;
  13. }
  14. .box2 {
  15.  background-color: #CC99FF;
  16.  height: 100px;
  17.  width: 100px;
  18.  position:relative;
  19.  right:200px;/*此值总被认为是-left=-10px,所以你怎么改它都不会影响到布局*/
  20.  left:10px;/*这里设定了两个定位值，但是它们是矛盾的，所以此时将以左边为准，如果是上下类型错误，则以上边定位数值为准*/  
  21.  
  22. }
  23. </style>
  24. <script type="text/javascript">  
  25.  
  26. </script>
  27. </head>
  28. <body>
  29.  
  30. <div class="box1">
  31.   <div class="box2"></div>
  32. </div>

　　

  1. <style type="text/css">
  2. <!--
  3. *{
  4.  margin:0px;
  5.  padding:0px;
  6. }
  7. body {
  8.  margin:10px;
  9.  font-size: 13px;
  10. }
  11. a:link {
  12.  color: #666;
  13.  text-decoration: none;/*去除链接下划线*/
  14. }
  15. a:visited {
  16.  color: #666;
  17.  text-decoration: none;
  18. }
  19. a:hover {
  20.  color: #F90;
  21. }
  22. h3 {
  23.  color: #FFF;
  24.  background-color: #F90;
  25.  width: 100px;
  26.  padding-top:3px;
  27.  text-align:center;
  28. }
  29. ul {
  30.  width: 300px;
  31.  border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/
  32. }
  33. ul li {
  34.  padding:5px;
  35.  border-bottom: 1px solid #CCC;
  36.  list-style:none;/*去除列表样式，这对于标准浏览很重要*/
  37. }
  38. a {
  39.  position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/
  40.  display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
  41. }
  42. a div {
  43.  display: none;/*初始化信息面板不显示*/
  44. }
  45. a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
  46. a:hover div {
  47.  position: absolute;
  48.  padding:5px;
  49.  display:block;
  50.  width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
  51.  left:150px;/*这是相对父级A的定位*/
  52.  top: 20px;
  53.  border: 1px solid rgb(91,185,233);
  54.  background-color: rgb(228,246,255);
  55.  z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
  56. }
  57. a img {
  58.  width:80px;
  59.  height:80px;
  60.  border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
  61.  display:block;
  62.  position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
  63.  top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
  64.  left:5px;
  65. }
  66. dl {
  67.  width: 160px;
  68.  float:right;
  69.  color: #999;
  70.  line-height:20px;
  71. }
  72. dl dd span {
  73.  font-weight: bold;
  74.  color: #639;
  75. }
  76. -->
  77. </style>
  78. </head>  
  79.  
  80. <body>
  81. <h3>最新单曲</h3>
  82. <ul>  
  83.  
  84. <li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />
  85. <dl>
  86.  <dd><span>歌名:</span>爱的文身</dd>
  87.  <dd><span>歌手:</span>黄圣依</dd>
  88.  <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>
  89. </dl></div></a></li>  
  90.  
  91. <li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />
  92. <dl>
  93.  <dd><span>歌名:</span>累了</dd>
  94.  <dd><span>歌手:</span>阿信</dd>
  95.  <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>
  96. </dl></div></a></li>  
  97.  
  98. <li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />
  99. <dl>
  100.  <dd><span>歌名:</span>漫漫 慢慢</dd>
  101.  <dd><span>歌手:</span>阿朵</dd>
  102.  <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>
  103. </dl></div></a></li>  
  104.  
  105. <li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />
  106. <dl>
  107.  <dd><span>歌名:</span>我怀念的</dd>
  108.  <dd><span>歌手:</span>孙燕姿</dd>
  109.  <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>
  110. </dl></div></a></li>  
  111.  
  112. <li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />
  113. <dl>
  114.  <dd><span>歌名:</span>花期越来越近</dd>
  115.  <dd><span>歌手:</span>后弦</dd>
  116.  <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>
  117. </dl></div></a></li>  
  118.  
  119. </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. LightOJ 1058 平行四边形的判断定理

    题目大意:给你n个点,求这n个点最多能组成多少个平行四边形. 题目思路:这道题卡时间,而且卡内存.你要尽可能的想办法优化. 平行四边形的判定定理: 两组对边分别平行的四边形是平行四边形(定义判定法): ...

  2. Learning Java IO indexes

    I/O Streams, it simplifies I/O operations, write a whole object out to stream & read back. File ...

  3. 解决UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(128

    今天做网页到了测试和数据库交互的地方,其中HTML和数据库都是设置成utf-8格式编码,插入到数据库中是正确的,但是当读取出来的时候就会出错,原因就是python的str默认是ascii编码,和uni ...

  4. HDU 2489 Minimal Ratio Tree (DFS枚举+最小生成树Prim)

    Minimal Ratio Tree Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) ...

  5. ffmpeg合并多个视频

    实例1: 把4个视频(1.f4v, 2.f4v, 3.f4v, 4.f4v)合并成一个文件(out.mp4) 基本无损,而且速度飞快! #-vcodec copy -acodec copy   == ...

  6. Git学习 -- 工作区和暂存区

    工作区(working directory): 就是能看到的目录,如我的git文件夹 版本库(repository): 工作区有一个隐藏目录.git,这个不算工作区,而是Git的版本库 里面最重要的就 ...

  7. Java8学习笔记----Lambda表达式 (转)

    Java8学习笔记----Lambda表达式 天锦 2014-03-24 16:43:30 发表于:ATA之家       本文主要记录自己学习Java8的历程,方便大家一起探讨和自己的备忘.因为本人 ...

  8. Universal-Image-Loader分析：

    Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示.权限: <uses-permission ...

  9. USER-AGENT是什么

    USER-AGENT是什么? USER-AGENT:记录请求所来自的浏览器. User-Agent分析网站 http://www.useragentstring.com/ 通过解析User-Agent ...

  10. 链表基础 HDU1267

    基础的链表,模拟一下就好了...就签个到