同级、父子级div定位
以两个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定位的更多相关文章
- 同级div设置display:inline-block，父级div强制不换行
同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...
- position:fixed相对父级元素定位而不是浏览器
position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- html中div定位练习
html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题
转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
- div定位
1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <styl ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- html css样式子元素相对父级元素定位
废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.
随机推荐
- NSString格式校验
在项目开发过程中,NSString类型的变量是经常用到的,而且我们常常会对其格式进行对应的各种校验,你比如,在登录注册的时候,需要验证用户名的长度,用户名的字符组成等等,其实现在也有很多第三方提供的N ...
- chardet坑——比蜗牛还慢
需求 最近在做一个功能,使用python爬取网页然后保存到本地.其中遇到的一个难题是判断页面的编码方式.有问题就百度喽,当时我没想到自己去解决.一百度就找到了一个叫chardet的插件.大喜过望,试了 ...
- Ubuntu之root权限的获取
方案一: Ubuntu的root密码在没有设置之前是随机的,即在每一次开机的时候他的密码都不同,但是由于在安装Ubuntu的时候需要建立一个账户,而这个招呼又属于admin组,因此它可以对root进行 ...
- Code::Blocks配置GTK+2和GTK+3
Code::Blocks配置GTK+2和GTK+3 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根 ...
- 由 s:hidden 引起的文本框内容不能传到 struts的Action中
<s:form id="startForm" name ="startForm" action="/hall/hall_startList.do ...
- centos git 服务器搭建
1.安装git sudo yum -y install git 2.创建用户与授权 # 找到 git_shell whereis git_shell /usr/bin/git-shell # 创建 g ...
- RCP：拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- 压力测试工具ab使用
ab全名是apache bench,是apache自带的一款压力测试工具.它通过创建多个线程来模拟并发,测试目标是基于URL的,因此不论是什么web服务器都可以支持. 使用ab非常简单,进入apach ...
- [.net 面向对象编程基础] (14) 重构
[.net 面向对象编程基础] (14) 重构 通过面向对象三大特性:封装.继承.多态的学习,可以说我们已经掌握了面向对象的核心.接下来的学习就是如何让我们的代码更优雅.更高效.更易读.更易维护.当然 ...
- L#脚本语言，直接把DLL当脚本执行（图解说明）
L#是什么:Run DLL as a Script. A Pure C# IL Runner,直接解析执行IL的脚本引擎. 从原理上讲是模拟执行了CLR的工作,从表现上讲就是把DLL作为资源直接加载执 ...