<!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. Hibernate 参数匹配查询

    第一种: public User validate(String userName, String password) { String hql = "from User where use ...

  2. ubuntu i3 xterm中文输入显示问题解决

    i3config 配置 !启动fcitx输入法管理 exec fcitx -d Xresource配置 !设置输入法管理器为fcitx xterm*inputMethod: fcitx !设置英文字体 ...

  3. Spark（十二） -- Spark On Yarn & Spark as a Service & Spark On Tachyon

    Spark On Yarn: 从0.6.0版本其,就可以在在Yarn上运行Spark 通过Yarn进行统一的资源管理和调度 进而可以实现不止Spark,多种处理框架并存工作的场景 部署Spark On ...

  4. webstorm 破解方式

    注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.iteblog.com/key.php 点击:Acti ...

  5. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何把FBD功能块转换成ST语言

    假如我定义了一个MC_Power的标准功能块,我想知道它对应的ST语言   在MAIN(ST语言界面下)右击,Input Assistant,然后找到Standard Function Blocks, ...

  6. MPTCP 源码分析(五) 接收端窗口值

    简述:      在TCP协议中影响数据发送的三个因素分别为:发送端窗口值.接收端窗口值和拥塞窗口值. 本文主要分析MPTCP中各个子路径对接收端窗口值rcv_wnd的处理.   接收端窗口值的初始化 ...

  7. windows系统下GCC的安装与配置

    刚开始看 C++ Primer,看到编译器的部分,自己搜了搜怎么搭建GCC,搜到以下内容,复制过来留个印象: windows系统下GCC的安装方法,以及一些环境变量的配置,如果对GCC不是很清楚,关于 ...

  8. LuaStudio编辑调试软件

    该编辑调试器最大特点就是能够注入到宿主程序内对lua脚本进行调试.还能够设置断点观察变量的值,功能很强大. 如今已有的编辑器有Notepad++, Editplus, luaforwindows, S ...

  9. Hive 练习 简单任务处理

    1.2018年4月份的用户数.订单量.销量.GMV (不局限与这些统计量,你也可以自己想一些) -- -- -- 2018年4月份的用户数量 select count(a.user_id) as us ...

  10. hive 用户订单行为 基础操作

    今天用hive查询用户日志表.这是日志表的格式: user_id,item_id,cat_id,merchant_id,brand_id,month,day,action,age_range,gend ...