这些例子最好通过FireFox结合FireBug调试查看

1、absolute让元素inline-block化

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title>absolute让元素inline-block化</title>
  6.      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  7.      <link rel="icon" href="favicon.ico" type="image/x-icon" />
  8.      <style type="text/css">
  9.          body
  10.          {
  11.              font-family: 'Microsoft YaHei';
  12.              font-size: 18px;
  13.          }
  14.  
  15.          .div
  16.          {
  17.              padding: 10px;
  18.              margin-left: 20px;
  19.              margin-bottom: 10px;
  20.              background-color: #f0f3f9;
  21.              border: 8px solid #ffd800;
  22.          }
  23.  
  24.          .abs
  25.          {
  26.              position: absolute;
  27.          }
  28.  
  29.          .info
  30.          {
  31.              bottom: 10px;
  32.              right: 10px;
  33.              border-width: 8px 0 0;
  34.              border-radius: 8px 8px 0 0;
  35.              border-color: blue;
  36.          }
  37.  
  38.              .info span
  39.              {
  40.                  width: 200px; /*width无效，必须设置为block才有效!有3种方式>>>>1、display：block;2、float:left;3、position:absolute;*/
  41.                  border: 1px solid #4cff00;
  42.                  display: block;
  43.                  /*float:left;*/
  44.                  /*position: absolute;
  45.                  left: 0;
  46.                  top: 0;*/
  47.              }
  48.      </style>
  49.  
  50.  </head>
  51.  <body>
  52.      <div class="div">
  53.          <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
  54.          <p>无absolute</p>
  55.      </div>
  56.      <div class="div abs">
  57.          <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
  58.          <p>absolute后</p>
  59.      </div>
  60.      <div class="div abs info">
  61.          <p>
  62.              说明：包裹性换种说法就是让元素inline-block化，<br />
  63.              例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，<br />
  64.              则100%默认宽度就会变成自适应内部元素的宽度。
  65.          </p>
  66.          <h1>absolute 特性总结</h1>
  67.          <p>
  68.              1、脱离文档流<br />
  69.              2、宽和高均为0（FireBug查看布局可知）<br />
  70.              3、如果没有[left/right/top/bottom] 则待在原位（表现为一个没有长宽的参考点）<br />
  71.              4、如果指定[left/right/top/bottom] 则向上追溯到 relative或absolute父盒子，直至body后定位<br />
  72.              5、包裹其内部子元素，即让元素inline-block化<br />
  73.          </p>
  74.          <span>这是span标签，inline是没有宽度的，block后才有宽度</span>
  75.      </div>
  76.  
  77.  </body>
  78.  </html>

2、absolute绝对定位的破坏性

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  6.      <link rel="icon" href="favicon.ico" type="image/x-icon" />
  7.      <title>absolute绝对定位的破坏性</title>
  8.      <style>
  9.          body
  10.          {
  11.              font-family: 'Microsoft YaHei';
  12.              font-size: 18px;
  13.          }
  14.  
  15.          .div
  16.          {
  17.              padding: 10px;
  18.              margin: 5px;
  19.              border: 8px solid #ffd800;
  20.              background-color: #f0f3f9;
  21.              float: left;
  22.          }
  23.  
  24.          .abs
  25.          {
  26.              position: absolute;
  27.              /*没有翅膀是飞不走的,待在原位*/
  28.              /*
  29.                1、取消注释，插上翅膀，则会以body为参考物作left:0 top:0 位移
  30.                2、FireBug禁用翅膀，取消位移，回到原位！
  31.              */
  32.              /*left: 0px;
  33.              top: 0px;*/
  34.          }
  35.  
  36.          .info
  37.          {
  38.              border-width: 8px 0 0;
  39.              border-radius: 8px 8px 0 0;
  40.              border-color: blue;
  41.              top: auto; /*复写abs以清空*/
  42.              left: 10px; /*复写abs以重置*/
  43.              bottom: 10px;
  44.          }
  45.      </style>
  46.  </head>
  47.  <body>
  48.      <div class="div">
  49.          <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
  50.          <p>图片无absolute</p>
  51.      </div>
  52.      <div class="div">
  53.          <img class="abs" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
  54.          <p>
  55.              图片absolute后,absolute的参考物，为啥没有追溯到body，而是在本div中？<br />
  56.              因为没有指定left/top！没有翅膀是飞不走的！<br />
  57.              事实上参考物的确为body，只不过没有飞走！<br />
  58.              依然保持原位，貌似还在div中。
  59.          </p>
  60.      </div>
  61.      <div class="div abs info">
  62.          <p>说明：图片设置position:absolute属性后，父标签的高宽都塌陷了，连它的兄弟float都救不了。</p>
  63.  
  64.      </div>
  65.  </body>
  66.  </html>

3、父盒子限魔大法

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  6.      <link rel="icon" href="favicon.ico" type="image/x-icon" />
  7.      <title>父盒子限魔大法</title>
  8.      <style>
  9.          body
  10.          {
  11.              font-family: 'Microsoft YaHei';
  12.              font-size: 18px;
  13.          }
  14.  
  15.          .box
  16.          {
  17.              width: 15em;
  18.              height: 10em;
  19.              background-color: #beceeb;
  20.              position: relative; /*父盒子限魔大法,父盒子真身还在文档流，纵云梯z-index飙升*/
  21.              /*position: absolute;*/ /*父盒子限魔大法，父盒子真身不在文档流，没有了宽和高，纵云梯z-index飙升*/
  22.              left: 100px;
  23.              top: 100px;
  24.          }
  25.  
  26.              .box img
  27.              {
  28.                  position: absolute; /*向上追溯absolute或relative，直至body*/
  29.                  left: 20px;
  30.                  top: 20px;
  31.              }
  32.      </style>
  33.  </head>
  34.  <body>
  35.      <div>
  36.          <p>说明：限制absolute以body为参考物，约束在拥有ablolute或relative属性的父容器</p>
  37.      </div>
  38.      <div id="target" class="box">
  39.          <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
  40.      </div>
  41.  
  42.  </body>
  43.  </html>

4、relative最小影响原则（不遵循）

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  6.      <link rel="icon" href="favicon.ico" type="image/x-icon" />
  7.      <title>relative最小影响原则（不遵循）</title>
  8.      <style>
  9.          body
  10.          {
  11.              font-family: 'Microsoft YaHei';
  12.              font-size: 18px;
  13.          }
  14.  
  15.          .test
  16.          {
  17.              width: 25em;
  18.              margin: 2em auto;
  19.          }
  20.  
  21.          .box
  22.          {
  23.              padding: 2em;
  24.              border: 1px solid #beceeb;
  25.              border-radius: 2px;
  26.              background-color: #f0f3f9;
  27.              position: relative;
  28.          }
  29.  
  30.          .ok
  31.          {
  32.              color: green;
  33.              font-size: 6em;
  34.              position: absolute;
  35.              right: -11px;
  36.              bottom: -.5em;
  37.          }
  38.  
  39.          .infodiv
  40.          {
  41.              background-color: #f0f3f9;
  42.              margin: 5px auto;
  43.              width: 800px;
  44.          }
  45.  
  46.          .infoborder
  47.          {
  48.              /*position: absolute;*/ /*inline-block化,但是没有自然居中，即需要其他辅助居中*/
  49.              border-style: solid;
  50.              border-width: 8px 0 0;
  51.              border-radius: 8px 8px 0 0;
  52.              border-color: blue;
  53.          }
  54.      </style>
  55.  </head>
  56.  <body>
  57.      <div class="test">
  58.          <div class="box">
  59.              CSS relative相对定位的最小化影响原则
  60.          <strong class="ok">√</strong>
  61.          </div>
  62.      </div>
  63.  
  64.      <div class="infodiv infoborder">
  65.          <p>
  66.              将需要绝对定位的元素单独放在relative属性的标签下，于是，<br />
  67.              relative相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。<br />
  68.              于是，上面的文字内容div还是那个普普通通的文字内容div，<br />
  69.              以后要改动什么东西就可以放心大胆的改，而不需要担心扔掉那个属性或是布局变了,<br />
  70.              里面原来绝对定位的元素位置偏移掉了。<br />
  71.              也就是牺牲一个标签增强扩展性和易维护性！
  72.          </p>
  73.      </div>
  74.  
  75.  </body>
  76.  </html>

5、relative最小影响原则（遵循）

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  6.      <link rel="icon" href="favicon.ico" type="image/x-icon" />
  7.      <title>relative最小影响原则（遵循）</title>
  8.      <style>
  9.          body
  10.          {
  11.              font-family: 'Microsoft YaHei';
  12.              font-size: 18px;
  13.          }
  14.  
  15.          .test
  16.          {
  17.              width: 25em;
  18.              margin: 2em auto;
  19.          }
  20.  
  21.          .box
  22.          {
  23.              padding: 2em;
  24.              border: 1px solid #beceeb;
  25.              border-radius: 2px;
  26.              background-color: #f0f3f9;
  27.          }
  28.  
  29.          .rel
  30.          {
  31.              position: relative;
  32.          }
  33.  
  34.          .ok
  35.          {
  36.              color: green;
  37.              font-size: 6em;
  38.              position: absolute;
  39.              right: -10px;
  40.              top: -1em;
  41.          }
  42.  
  43.          .infodiv
  44.          {
  45.              background-color: #f0f3f9;
  46.              margin: 5px auto;
  47.              /*width: 800px;*/
  48.          }
  49.  
  50.          .infoborder
  51.          {
  52.              position: absolute; /*inline-block化,但是脱离文档流后无法自然居中,居中的技巧就是transform*/
  53.              left: 50%;
  54.              -moz-transform: translateX(-50%);
  55.              -ms-transform: translateX(-50%);
  56.              -o-transform: translateX(-50%);
  57.              -webkit-transform: translateX(-50%);
  58.              transform: translateX(-50%);
  59.              border-style: solid;
  60.              border-width: 8px 0 0;
  61.              border-radius: 8px 8px 0 0;
  62.              border-color: blue;
  63.          }
  64.      </style>
  65.  </head>
  66.  <body>
  67.      <div class="test">
  68.          <div class="box">CSS relative相对定位的最小化影响原则</div>
  69.          <div class="rel"><strong class="ok">√</strong></div>
  70.      </div>
  71.      <div class="infodiv infoborder">
  72.          <p>
  73.              将需要绝对定位的元素单独放在relative属性的标签下，于是，<br />
  74.              relative相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。<br />
  75.              于是，上面的文字内容div还是那个普普通通的文字内容div，<br />
  76.              以后要改动什么东西就可以放心大胆的改，而不需要担心扔掉那个属性或是布局变了,<br />
  77.              里面原来绝对定位的元素位置偏移掉了。<br />
  78.              也就是牺牲一个标签增强扩展性和易维护性！
  79.          </p>
  80.      </div>
  81.  </body>
  82.  </html>

absolute和relative的几个Demo的更多相关文章

  1. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  3. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  5. position属性absolute和relative理解

    relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...

  6. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  7. position的absolute与fixed，absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  8. focus、click、blur、display、float、border、absolute、relative、fixed

    onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占 ...

  9. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

随机推荐

  1. Asp.net网页中禁止使用剪切、复制、粘贴的方法

    工欲善其事,必先利其器 在asp.net开发的网页中,有时候需要禁止用户粘贴复制密码,禁止用户copy文章直接粘贴到文本框中.采取的方法是直接在限制控件的地方写上禁止粘贴文本的代码.但是这样不是很方便 ...

  2. MongoDB使用记录

    安装服务 使用以下命令将MongoDB安装成为Windows服务.笔者的MongoDB目录为D:\Program Files\mongodb mongod --logpath "D:\Pro ...

  3. linux下搭建nginx+php(FastCGI)+mysql运行环境

    一.安装环境 1.CentOS5.5 2.php5.4 3.MySQL5.5.19 二.安装程序依赖库和开发环境 为了省事把所需要的库文件全都安装上,可以使用rpm包安装,也可以用yum命令安装, 1 ...

  4. Poj 1054 The Troublesome Frog / OpenJudge 2812 恼人的青蛙

    1.链接地址: http://poj.org/problem?id=1054 http://bailian.openjudge.cn/practice/2812 2.题目: 总时间限制: 10000m ...

  5. java 中hashcode和equals 总结

    一.概述            在Java中hashCode的实现总是伴随着equals,他们是紧密配合的,你要是自己设计了其中一个,就要设计另外一个.当然在多数情况下,这两个方法是不用我们考虑的,直 ...

  6. leetcode problem 41 -- First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  7. 我爱工程化 之 gulp 使用（一）

    一.简介 gulp是前端自动化工具,压缩.合并.预编译检查等等,它与grunt频繁IO操作来消耗内存相比,它是使用的流的方式,我们可以简称为管道流(一端入,一端出,3通水,一个大桶,第一通在管道里面流 ...

  8. JavaScript 继承的几种模式

    /** * Created by 2016 on 2016/6/5. */ //1.原型链继承 //把子类的原型,定义为超类的实例 通过原型来访问超类的方法和属性 function Person(){ ...

  9. centos 6.5 x64编译有python的vim7.4

    wget ftp://ftp.vim.org/pub/vim/extra/vim-7.2-extra.tar.gzwget ftp://ftp.vim.org/pub/vim/extra/vim-7. ...

  10. Sql语句批量更新数据(多表关联)

    最近在项目中遇到一个问题,原来设计的功能是不需要一个特定的字段值depid的,但是新的功能需要根据depid来展现,于是出现了这样一个问题,新增加的数据都有正确的depid,而原来的大量的数据就没有d ...