以两个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. Mac 问题

    1.mac siri有什么用? 语音功能,感觉用处不是特别大 2.mac iphone 复制粘贴 没找到该怎么做. 3.icloud dirver 类似dropbox,不过网络应该不太好,不靠谱.

  2. Intent组件的传参应用

    Intent是要执行的操作的抽象描述 可以在startActivity.startService等方法中使用 最为常见的用法是在Activity之间传递数据 跳转并传值: Intent intent= ...

  3. ORACLE中的DECODE函数

    今天遇到一个问题,数据库中需要排序的字段是中文,但是有不能按照中文拼音来排序,在网上查到一些资料,完美的解决了问题. DECODE(DS.RANGE_NAME,'高',3,'中',2,'低',1,'潜 ...

  4. iOS 删除已经配置的类库和移除CocoaPods

    引言 我们使用CocoaPods非常高效地将一些第三方类库导入到我们的项目中,但是不由得产生一个疑问:如果发现某个类库不适用,甚至是整个CocoaPods我们都不想再在项目中持有,那么我们要怎么把这些 ...

  5. rhel 5.8下静默安装oracle11gr2

    1.图形界面下录制脚本如下: #-------------------------------------------------------------------------------# Do ...

  6. EntityFunctions.AsNonUnicode

    http://blog.csdn.net/zzx3q/article/details/7863797 使用工具VS2010 凡是调用FindAll的地方,如果传入参数是String类型的变量(数字类型 ...

  7. Viewbox在UWP开发中的应用

    Windows 8.1 与Windows Phone 8.1的UAP应用,终于在Windows 10上统一到了UWP之下.原来3个不同的project也变为一个.没有了2套xaml页面,我们需要用同一 ...

  8. Wix 安装部署教程(八) 自动生成XML小工具

    这个功能类似于Heat.exe,指定文件夹,生成对应的WIX标签.Winform做的,代码简单,生成的标签需要粘贴到对应的目录才能使用,并不是一步到位. 需要设定两个参数,一个是文件夹路径,一个是文件 ...

  9. WebDAV 配置及相关工具

    最近在项目中安装和调试服务器,杯具的是,服务器是内网地址,而且不可以直接SSH.SFTP,只能通过中间一台linux作为跳板,然后在SSH命令行里去操作目标机器. 如果只是命令行操作也就无所谓了,但是 ...

  10. Java提高篇（三五）-----Java集合细节（一）：请为集合指定初始容量

    集合是我们在Java编程中使用非常广泛的,它就像大海,海纳百川,像万能容器,盛装万物,而且这个大海,万能容器还可以无限变大(如果条件允许).当这个海.容器的量变得非常大的时候,它的初始容量就会显得很重 ...