以两个div右上角对齐为例：

效果图：

1.同级定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>同级</title>

        <style type="text/css">

            body {

                margin: 0;

                padding: 0;

            }

            .main {

                position: relative;

                width:1000px;

                height:600px;

                background: gray;

            }

            .div_01 {

                position: absolute;

                top: 0;

                right: 0;

                width: 600px;

                height: 400px;

                z-index: 1;

                background: yellow;

            }

            .div_02 {

                position: absolute;

                top: 0;

                right: 0;

                width: 200px;

                height: 100px;

                z-index: 2;

                background: green;

                }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="div_01">

                div_01

            </div>

            <div class="div_02">

                div_02

            </div>

        </div>

    </body>

</html>

2.父子级定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>嵌套</title>

        <style type="text/css">

            body {

                margin: 0;

                padding: 0;

            }

            .div_01 {

                position: relative;

                width:600px;

                height:400px;

                background: yellow;

            }

            .div_02 {

                position:absolute;

                top: 0;

                right: 0;

                width:200px;

                height:100px;

                background: green;

                }

        </style>

    </head>

    <body>

        <div class="div_01">

            <div class="div_02">

                div_02

            </div>

        </div>

    </body>

</html>

同级、父子级div定位的更多相关文章

  1. 同级div设置display:inline-block，父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  2. position:fixed相对父级元素定位而不是浏览器

    position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...

  3. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  4. html中div定位练习

    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...

  5. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  6. div定位

    1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <styl ...

  7. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  8. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  9. html css样式子元素相对父级元素定位

    废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.

随机推荐

  1. 链接报error LNK2019: unresolved external symbol错误，解决

    http://blog.163.com/aiding_001/blog/static/22908192011102224344450/ 某次编写一个COM组件,接口定义好之后,增加了ZRX代码后编译链 ...

  2. day9---多线程，线程锁，队列

    进程.线程 http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html 使用threading模块实现多线程编程[综述] Pyt ...

  3. CUTE-WRV2.1+TCP core(COM5402)的TCP带宽测试

    问题的提出 测试TCP的带宽,硬件平台CUTE-WRV2.1,固件版本WRPCV3.0+COM5402. 代码.工具及实现 1. 在固件中,增加模块,收到TCP数据包后不断地往外发数: library ...

  4. PCFG -- 基于统计方法生成语法树

    语法树的作用 一棵语法树不仅包括了词性(part of speech), 还包括了短语(如名词短语, 动词短语)和结构化的信息(如主语, 谓语和宾语). 这些信息是进行机器翻译所必须的, 例如机器翻译 ...

  5. Paypal支付接口

    先吐槽一下,国外的创业环境真的远远好于国内的创业环境. vps便宜,网络质量好,没有各种政策监管,各种便捷的金融工具.这其中就包括paypal. Paypal 支持两种付款方式,信用卡+paypal注 ...

  6. ORACLE10g数据库字符集设置和客户端字符集设置不一致问题

    在家里自己电脑上又重新安装了Oracle 10g和PLSQL Developer,装完后启动PLSQL Developer,弹出如下错误信息: 解决方案: 在Windows运行命令行中输入regedi ...

  7. 据说练就了一指禅神功的觅闻实时手机新闻网,正以每天2000+IP的用户量递增。有智能手机的可以当场进行体验，没有的就算了哈

    据说练就了一指禅神功的觅闻实时手机新闻网,正以每天2000+IP的用户量递增.有智能手机的可以当场进行体验,没有的就算了哈 觅闻实时手机新闻网  http://m.yunxunmi.com 在IOS. ...

  8. MongoDB分片之数据分割方式

    随着移动互联网的发展,大量的非结构化数据随之产生,不仅对数据库存储大数据提出了新的要求,同时对于查询数据和进行大数据分析也提出了苛刻的要求,这些显然是单服务器处理能力无法满足的,自然建立一个集群是不可 ...

  9. net与树莓派的情缘（一）

    想做个NAS  由于手中经济有限又不想花太多钱,所以决定买个树莓派自己搭建. 板子:树莓派2代 elem14的 内存卡:闪迪 class10 16g 网线一根,电源线一个 系统:树莓派官方 Raspb ...

  10. 初中级Javascript程序员必修学习目录

    很多人总感觉javascript无法入门,笔者在这里写一下自己的学习过程,以及个人认为的最佳看书过程,只要各位能按照本人所说步骤走下去,不用很长时间,坚持个3个月,你的js层级会提高一个档次,无他,唯 ...