1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         /*
  8.          position: absolute;
  9.          相配合使用的属性分别有：
  10.             定位属性：left、right、top、bottom
  11.             堆叠顺序属性：z-index
  12.           定位属性是用来定位元素的位置的，四个方向可以设置位置；
  13.           堆叠顺序属性用来定义如果多个含有position属性的元素的堆叠顺序。
  14.          参照浏览器左上角，配合 top left right bottom（TLRB）进行定位，
  15.          1、在没有设定TLRB,默认依据父级的坐标原点为起始点
  16.          2、如果设定了TLRB,并且父级没有设定position属性，
  17.             那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定
  18.          3、如果设定了TLRB,并且父级设定position属性，
  19.             那么当前的absolute则以父级元素的左上角为原始点进行定位，位置将由TRBL决定
  20.  
  21. 　　　　　
  22.           如果子元素没有设置TLRB,默认以及父级的坐标原点为起始点。
  23.           如果设定了TRLB，父级元素有定义position属性，则absolute的（0,0）位置在父级元素的左上角位置，位置由定位属性(TLRB)决定；
  24.           如果设定了TRLB，父级元素没有定义position属性，则absolute的（0,0）位置在浏览器的右上角位置，位置由定位属性(TLRB)决定。
  25.           所以谁absolute有随机性的，大多是因为没有注意到父级元素是否也定义过position属性
  26.  
  27.           fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。*/
  28.         #parent{
  29.             position: absolute;
  30.             height: 200px;
  31.             width:200px;
  32.             border: 4px solid red;
  33.             background-color: #4cae4c;
  34.             margin-top:100px;
  35.             margin-left:100px;
  36.  
  37.         }
  38.  
  39.         #children{
  40.             position: absolute;
  41.             height: 20px;
  42.             width:60px;
  43.             border: 4px solid blue;
  44.             background-color: #761c19;
  45.             top:10px;
  46.             left: 50px;
  47.         }
  48.     </style>
  49. </head>
  50. <body style="margin: 0;padding: 0;background-color: gray">
  51. <div id = 'parent'>
  52.     <div id="children">
  53.  
  54.     </div>
  55. </div>
  56. </body>
  57. </html>
  58. 　　

　　

绝对定位position: absolute;的更多相关文章

  1. 层模型--绝对定位(position:absolute)

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...

  2. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  3. IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...

  4. 解决绝对定位div position: absolute 后面的<a> Link不能点击

    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...

  5. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  6. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  7. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  8. position:absolute，绝对定位和相对定位，JQ隐藏和显示

    需要在指定位置,用绝对定位. 如果直接写position:absolute,top:0;left:0,那就是以浏览器的左上角为参照了 现在需要在某一个指定位置用绝对定位 解决方法 在需要用绝对定位(p ...

  9. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

随机推荐

  1. 从HTML5移动应用现状谈发展趋势

    时光如梭,自2008年HTML5诞生以来已经过去了5年的时间,作为新一代的Web标准,它自问世以来就受到方方面面的强烈关注,也引起了许多争议,支持者因其开放强大的特点而鼓吹它的美好前景,质疑者因其迟迟 ...

  2. maven运行junit用例并生成报告maven-surefire-plugin，maven-antrun-extended-plugin

    转载:http://blog.csdn.net/hdyrz/article/details/78398964 测试类如下: package com.mmnn.test.testcase; import ...

  3. 文档对象模型-DOM(一)

    首先看一下DOM树结构: 每个节点都是一个对象,拥有方法和属性. 脚本可以访问以及更新DOM树(不是源代码). 针对DOM树的修改都会反映到浏览器. 访问并更新DOM树需要两个步骤:   一.定位到与 ...

  4. selenium从入门到应用 - 5，页面对象设计模式下的页面模块

    本系列所有代码 https://github.com/zhangting85/simpleWebtest 本文将介绍一个Java+TestNG+Maven+Selenium的web自动化测试脚本环境下 ...

  5. GBDT--简单理解

    梳理 1.Model Ensemble 能够分为三大类:Bagging,Boosting. Stacking. 2.Boosting能够说是一个思想(框架),而Adaboost等算法仅仅是其一个子类, ...

  6. python中的多进程处理

    转载于:http://blog.csdn.net/jj_liuxin/article/details/3564365 帮助文档见https://docs.python.org/2.7/library/ ...

  7. spring中反射机制和注入的使用

    http://www.cnblogs.com/andin/archive/2011/04/30/spring.html spring的一大核心概念是注入, 但是,这存在的一个前提就是类是由spring ...

  8. node-webkit中使用sqlite3

    sqlite3的官方文档提到:nodejs和node-webkit的ABI不同,所以默认的安装方式: npm install sqlite3 安装的sqlite3是无法使用的,需要重新编译. 编译方法 ...

  9. js 判断浏览器内核

    function getOs()  {      var OsObject = "";     if(navigator.userAgent.indexOf("MSIE& ...

  10. 使用maven结合requirejs管理前端脚本

    已有的web项目,一直使用Maven做工程管理,现阶段前端调整为使用requirejs来负责模块加载依赖,同时使用jasmine来完成前端的UT. 便与在maven下统一管理,简单整理了下合在一起的使 ...