同级、父子级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; 这样就可以达到子元素相对父级元素定位了.
随机推荐
- maven之上传新的jar包
今天要求上传若干jar包到maven服务器,师父曾经真的是一步一步点给我看.然后我特喵的忘记了,师父又一步一步点给我看,所以我记录下来,以后留用. 步骤如下,如图所示: 1)先在首页查询下将要上传的j ...
- 条件随机场matlab程序下载
19:44:23 1 http://www.cs.ubc.ca/~murphyk/Software/CRF/crf.html matlab程序包: 该条件随机场程序(CRF)是针对语句进行标注,mat ...
- 【C-分支结构】
一.关系运算符 双目运算符 自左向右结合 关系运算符的优先级低于算术运算符,高于赋值运算符 <(小于) <=(小于或等于) >(大于) >=(大于或等于) ==(等于) !=( ...
- 一个简单的RMAN自动备份脚本
rman备份脚本: #!/bin/bashsource /home/oracle/.bash_profile rman target / << EOFrun {allocate chann ...
- ubuntu vps折腾记
买了burgetVM的vps,512M内存/1024M交换内存,40G硬盘,2TB流量/月,cpu xeon E5-2620 操作系统选择了ubuntu 12,开始折腾. 第一步,配置vpn 找了很多 ...
- ORACLE10g数据库字符集设置和客户端字符集设置不一致问题
在家里自己电脑上又重新安装了Oracle 10g和PLSQL Developer,装完后启动PLSQL Developer,弹出如下错误信息: 解决方案: 在Windows运行命令行中输入regedi ...
- 【腾讯bugly干货】QQ空间直播秒开优化实践
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址为:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1204&am ...
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- 为什么PCB上的单端阻抗控制50欧姆
很多刚接触阻抗的人都会有这个疑问,为什么常见的板内单端走线都是默认要求按照50欧姆来管控而不是40欧姆或者60欧姆?这是一个看似简单但又不 好回答的问题.在写这篇文章前我们也查找了很多资料,其中最有知 ...
- 模糊测试——强制发掘安全漏洞的利器（Jolt 大奖精选丛书）
模糊测试——强制发掘安全漏洞的利器(Jolt 大奖精选丛书) [美]Sutton, M.Greene, A.Amini, P. 著 段念赵勇译 ISBN 978-7-121-21083-9 2013年 ...