以两个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. linux定时执行任务crontab命令用法

    linux系统的定时任务是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另外, 由于使用者自己也可以设置计划任务,所 ...

  2. Win10 无法完全关机问题

    Win10是重新安装的.开机运行时间长了或者跑的东西多了.关机,键盘灯还是亮的,要强制按电源键关机才行. 问题解决:从网上搜以为是显卡驱动问题,上官网更新最新驱动,结果还是关不了机.偶然间搜到是Int ...

  3. myrocks之事务处理

    前言 mysql目前支持的事务引擎有innodb,tokudb. rocksdb加入mysql阵营后,mysql支持的事务引擎增长至3个.myrocks目前支持的事务隔离级别有read-committ ...

  4. 你以为的ASP.NET文件上传大小限制是你以为的吗

    我们以为的文件大小限制 我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.confi ...

  5. 我的ORM之五-- 事务

    我的ORM索引 单库事务与分布式事务 单库事务: 性能更好,应用于一个数据库时的场景,当数据库发生变化,如拆分为多个服务器,代码需要修改. 分布式事务:性能相对较差,但有更大的适用场景.当数据库发生变 ...

  6. 分享一个简单程序(webApi+castle+Automapper+Ef+angular)

    前段时间在周末给朋友做了一个小程序,用来记录他们单位的一些调度信息(免费,无版权问题).把代码分享出来.整个程序没有做任何架构.但是麻雀虽小,用到的技术也没少.WebApi+Castle+AutoMa ...

  7. 解决在onCreate()过程中获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  8. EF架构~为IEnumerable接口添加增删查等操作，原因是IEnumerable导航属性更放心

    回到目录 对EF开发来说,导航属性肯定都用过,事实上,它是由VS IDE工具根据你的数据库关系结构自动生成的外键属性,在类视图中可以看到相关属性,它是以外键表名来标识的,如果是一对多的关系,那么,它会 ...

  9. PHP 函数基础

    1.简单函数     函数四要素:返回类型,函数名,参数列表,函数体 function Show(){      echo "hello";}Show();         输出了 ...

  10. iOS—网络实用技术OC篇&网络爬虫－使用java语言抓取网络数据

    网络爬虫-使用java语言抓取网络数据 前提:熟悉java语法(能看懂就行) 准备阶段:从网页中获取html代码 实战阶段:将对应的html代码使用java语言解析出来,最后保存到plist文件 上一 ...