<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*

         position:relative;

         绝对相对定位，他是参照父级的原始点为原始点。

         无父级则以BODY的原始点为原始点，配合TRBL进行定位.

         当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。*/

        #parent{

            height: 200px;

            width:200px;

            border: 4px solid red;

            background-color: #4cae4c;

            margin-top:100px;

            margin-left:100px;

        }

        #children{

            position: relative;

            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'>aaaaaaaaaaaa

        <div id="children">

            bbbb

        </div>

    </div>

</body>

</html>

　　

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

  1. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

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

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

  3. day6 相对定位：position:relative

    相对定位:position:relative 特点:a.相对于自己原来位置的定位,以自己的左上角为基准. b.相对定位原来的位置仍然算位置,不会出现浮动现象. 以下为初始位置:(可以看出设置margi ...

  4. CSS position relative absolute fixed

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

  5. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  6. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  7. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  8. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

  9. position relative

    position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于 ...

随机推荐

  1. Laravel 5 系列教程三：视图变量传递和Blade

    免费视频教程地址https://laravist.com/series/laravel-5-basic 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上 ...

  2. mac更新系统后Git不能用，提示missing xcrun at

    今天更新了mac系统,然后就踩了这个坑. 启动AndroidStudio 右上角提示: can't start git: /usr/bin/git probably the path to git e ...

  3. HTML5 Canvas 绘制二十四字真言钟表

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  4. Rails generate的时候不生成assets和test

    我们在执行rails g controller controller_name或者rails g model model_name的时候往往会生成相应的assets文件和test,怎么不让rails帮 ...

  5. java集合框架小结

    总结例如以下: 1.假设要求线程安全的, 使用Vector.Hashtable 2.假设不要求线程安全,应该使用ArrayList.LinkedList.HashMap 3.假设要求有映射关系,键值对 ...

  6. hadoop native本地库问题总结

    近期,打算hbase建表用snappy压缩时,碰到一些hadoop本地库的问题. 事实上这些问题是一直存在的,仅仅是不影响正常使用,就没有引起重视. 这次希望彻底解决下面问题: 问题一:运行start ...

  7. 【Excle】文本日期转化为日期格式

    现存在一列文本格式的日期 需要将该列转化为日期格式 方法一:使用分列 数据→分列,第三步选择[日期] 方法二:使用text函数 公式得到的结果为: 但是这样转化后的是文本型日期,需要转化为日期型得先转 ...

  8. jetty.xml解析

    我们知道jetty有一种启动方式是在jetty的根目录中运行命令行:java -jar start.jar,这个命令会调用apache的XmlConfiguration工具类作为启动类,这个类会默认读 ...

  9. PullToRefresh使用详解（一）--构建下拉刷新的listView

    前言:前几天写了篇关于PullToRefresh控件的DEMO导入的博客,但由于当时没有用到,所以就没细往下讲,现在开始到了实战阶段,用到了PullToRefresh的listView样式,网上有讲的 ...

  10. rsync for windows 详细使用教程

    rsync for windows 详细使用教程内容简介:rsync在windows与windows服务器之间的同步设置 1.准备两台机器: server-----192.168.0.201 clie ...