以两个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. php composer使用经验

    1.使用composer引用了一个包,但是这个包没有使用命名空间,在项目中该如何使用这个包? 编辑composer.json文件 "autoload":{ "files& ...

  2. list-style

    list-style: inside url(" "); 默认li的点在父级div框的外面,在li上加样式list-style-position: inside;可以使点在框内:点 ...

  3. Hibernate component mapping

    A Component is a containted object that is be persisted value type and not an entity.But you can emb ...

  4. 工具mark

    http://zh.snipaste.com/ 截图工具 https://brookhong.github.io/2014/04/28/keycast-on-windows-cn.html 按键显示 ...

  5. nginx.conf各参数的意义

    搬运+翻译至 http://qiita.com/syou007/items/3e2d410bbe65a364b603 /etc/nginx/nginx.conf 记录各个参数的意义 user user ...

  6. WCF Failed to invoke the service. Possible causes: The service is offline or inaccessible

    今天写WCf 时遇到如下报错: 调试过程发现,各个过程都无异常,但是返回给调用端数据时出现如下错误. Failed to invoke the service. Possible causes: Th ...

  7. [C#进阶系列]专题二：你知道Dictionary查找速度为什么快吗？

    一.前言 在之前有一次面试中,被问到你了解Dictionary的内部实现机制吗?当时只是简单的了问答了:Dictionary的内部结构是哈希表,从而可以快速进行查找.但是对于更深一步了解就不清楚了.所 ...

  8. Backbone源码解析（四）：View（视图）模块

    View视图故名思义,它控制的是界面.我们可以把一个大的网页分成很多部分的视图,按照backbone的架构,每一个视图对应都是一个对象,我们可以通过元素的钩子(id或者class或者其他选择器)把它们 ...

  9. 微软颜龄Windows Phone版开发小记

    随着微软颜龄中文网cn.how-old.net的上线,她也顺势来到了3大移动平台. 用户在微软颜龄这一应用中选择一张包含若干人脸的照片,就可以通过云计算得到他们的性别和年龄. 今天我们就和大家分享一下 ...

  10. 基础调试命令 - u/ub/uf

    在调试过程中难免会遇到需要反编译代码来分析逻辑的时候,在windbg中,需要反编译代码就要用到u/ub/uf这三个命令.本文这里分别介绍这三个命令各自的用途. 以下是一个quick sort的实例代码 ...