<!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. 安装Node.js、npm和环境变量的配置

    由于Node.js平台是在后端运行JavaScript代码,所以,必须首先在本机安装Node环境. 一.安装Node.js 首先,从Node.js官网下载对应平台的安装程序,网速慢的童鞋请移步国内镜像 ...

  2. volatile型变量自增操作的隐患

      用FindBugs跑自己的项目,报出两处An increment to a volatile field isn't atomic.对应报错的代码例如以下: volatile int num = ...

  3. Python 自用代码（拆分txt文件）

    现有一个28G的txt文件,里面每一行是一个分词过的专利全文文档,一共370多万行.我需要把它按每五万行为单位做成一个json文件,格式大致如下: [{"id":"100 ...

  4. 利用github和git命令，将本地项目共享到服务器上

    一.步骤 1. 创建项目根目录 mkdir 文件夹名 2. 初始化文件夹 git init 3. 配置用户名和邮箱(第一次配置后,不需要再登录) git config user.name 名字 git ...

  5. Java中的值传递与“引用传递”

    首先,Java没有 引用传递 这么一说. Java仅仅有值传递.传递的都是值,基本数据类型传递的是值.引用类型传递的是地址值. 我来理一下这当中宛如米线跟米面绞在一起了,再跟粉丝混在一起的关系. 好的 ...

  6. jQuery 全选 正反选

    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...

  7. Django——基于类的视图源码分析 一

    基于类的视图(Class-based view)是Django 1.3引入的新的视图编写方式,用于取代以前基于函数(Function-based)方式. 借助于OO和Python中方便的多重继承特性, ...

  8. MySQL存储过程详解 mysql 存储过程(转)

    mysql存储过程详解 1.      存储过程简介   我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的S ...

  9. 基于ShaderX5的顶点动画

    关于顶点动画,ShaderX5里有篇专门来讲,在虚幻3引擎里也有一个更加丰富的实现.使用了一个Pivot Painter的3dmax脚本.其实自己灵活用vertex color可以避开使用Pivot ...

  10. 使用AVPlayer制作一个播放器

    代码地址如下:http://www.demodashi.com/demo/11685.html AVPlayer 是一个强大的视频播放器,可以播放多种格式的视频,缺点是没有控制界面,需要自己去实现. ...