<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*

         position: absolute;

         相配合使用的属性分别有：

            定位属性：left、right、top、bottom

            堆叠顺序属性：z-index

          定位属性是用来定位元素的位置的，四个方向可以设置位置；

          堆叠顺序属性用来定义如果多个含有position属性的元素的堆叠顺序。

         参照浏览器左上角，配合 top left right bottom（TLRB）进行定位，

         1、在没有设定TLRB,默认依据父级的坐标原点为起始点

         2、如果设定了TLRB,并且父级没有设定position属性，

            那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定

         3、如果设定了TLRB,并且父级设定position属性，

            那么当前的absolute则以父级元素的左上角为原始点进行定位，位置将由TRBL决定

　　　　　

          如果子元素没有设置TLRB,默认以及父级的坐标原点为起始点。

          如果设定了TRLB，父级元素有定义position属性，则absolute的（0,0）位置在父级元素的左上角位置，位置由定位属性(TLRB)决定；

          如果设定了TRLB，父级元素没有定义position属性，则absolute的（0,0）位置在浏览器的右上角位置，位置由定位属性(TLRB)决定。

          所以谁absolute有随机性的，大多是因为没有注意到父级元素是否也定义过position属性

          fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。*/

        #parent{

            position: absolute;

            height: 200px;

            width:200px;

            border: 4px solid red;

            background-color: #4cae4c;

            margin-top:100px;

            margin-left:100px;

        }

        #children{

            position: absolute;

            height: 20px;

            width:60px;

            border: 4px solid blue;

            background-color: #761c19;

            top:10px;

            left: 50px;

        }

    </style>

</head>

<body style="margin: 0;padding: 0;background-color: gray">

<div id = 'parent'>

    <div id="children">

    </div>

</div>

</body>

</html>

　　

　　

绝对定位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. 转：http2基本中文翻译

    https://github.com/fex-team/http2-spec/blob/master/HTTP2%E4%B8%AD%E8%8B%B1%E5%AF%B9%E7%85%A7%E7%89%8 ...

  2. JAVA学习笔记 -- 多线程之共享资源

    在多线程程序执行过程中,可能会涉及到两个或者多个线程试图同一时候訪问同一个资源.为了防止这样的情况的发生,必须在线程使用共享资源时给资源"上锁",以阻挡其他线程的訪问. 而这样的机 ...

  3. 在redhat下使用x11vnc进行桌面共享

    1.在redhat上安装x11vnc时.你须要注意下面几个方面: (1)下载x11vnc的源代码包: 网址例如以下所看到的: http://sourceforge.net/projects/libvn ...

  4. CentOS 6.4 图文安装教程(有些设置大部分教程没出现过)

    http://www.jb51.net/os/78318.html CentOS 6.4 下载地址: http://www.jb51.net/softs/78243.html 1.首先,要有一张Cen ...

  5. java常用英语单词

    abstract (关键字) 抽象 ['.bstr.kt] access vt.访问,存取 ['.kses]'(n.入口,使用权) algorithm n.算法 ['.lg.riem] annotat ...

  6. 说说C#的数学类,Math,浮点数(上)

    说说C#的数学类,Math,浮点数 C#语言支持下图所看到的的数值类型,各自是整数,浮点数和小数 可能不是非常清楚,可是细致看看还是能看清楚的. 在一个C#程序中,整数(没有小数点的数)被觉得是一个i ...

  7. 使用Eclipse Memory Analyzer分析内存

    1 内存泄漏的排查方法 Dalvik Debug Monitor Server (DDMS) 是 ADT插件的一部分,当中有两项功能可用于内存检查 : ·    heap 查看堆的分配情况 ·     ...

  8. ros下基于百度语音的，语音识别和语音合成

    代码地址如下:http://www.demodashi.com/demo/13153.html 概述: 本demo是ros下基于百度语音的,语音识别和语音合成,能够实现文字转语音,语音转文字的功能. ...

  9. Selenium2 Python 自己主动化測试实战学习笔记（五）

    7.1 自己主动化測试用例 无论是功能測试.性能測试和自己主动化測试时都须要编写測试用例,測试用例的好坏能准确的体现了測试人员的经验.能力以及对项目的深度理解. 7.1.1 手工測试用例与自己主动化測 ...

  10. ActiveMQ与MSMQ的异同

    http://www.cnblogs.com/luluping/archive/2010/11/03/1867841.html      目前常用的消息队列组建无非就是MSMQ和ActiveMQ,至于 ...