div定位
1.float定位带来的问题
<html>
<head>
<title>div浮动引发的问题</title>
</head>
<style>
body{
margin:0px 1px 2px 3px;
}
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px dashed green;
}
#son1{
float:left;
}
#son2{
float:left;
}
#son3{
float:left;
}
#clear{
clear:both;
}
</style>
<body>
<div id="father">
<div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
<div id="son3">cccccccccccccccccccc</div>
<div id="clear"></div><!--采用float技术时，不需要浮动的时候一定要清楚浮动，否则后面的也都跟着浮动了-->
<div id="son4">dddddddddddddddddddd</div> <!--son4没有浮动，但它会受上面浮动的影响，也跟着浮动了-->
</div>
</body>
</html>
2.相对定位：是相对于原来的位置，相对定位时div并没有脱离文档流，即原来的位置还空着。
<html>
<head>
<title>采用div定位技术对div进行排版（相对定位）</title>
</head>
<style>
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px dashed green;
}
#son1{
position:relative;
left:60%;
}
#son2{
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
</div>
</div>
</body>
</html>
3.绝对定位1，如果div的父，父的父，。。。等没有指定position:relative，默认是相对浏览器边框定位，如果有
其中某个父，父的父，等指定了position:relative，则绝对定位是指相对于该父标签绝对定位。
绝对定位会脱离文档流，也即是不再占用原来的位置，别的div可以占用该位置。
绝对定位一般用来做照片签名
<html>
<head>
<title>div定位（绝对定位）</title>
</head>
<style>
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px dashed green;
}
#son1{
position:absolute; /*相对于浏览器边框定位*/
right:0px;
}
#son2{
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
<div id="son3">cccccccccccccccccccc</div>
</div>
</div>
</body>
</html>
绝对定位2
<html>
<head>
<title>div定位（绝对定位）</title>
</head>
<style>
#father{
background-color:#FFFF99;
width:100%;
height:100px;
border:1px dashed green;
position:relative;
}
#son1{
position:absolute; /*相对于father定位*/
right:0px;
}
#son2{
}
</style>
<body>
<div>
<div id="father">
<div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
<div id="son3">cccccccccccccccccccc</div>
</div>
</div>
</body>
</html>
div定位的更多相关文章
- html中div定位练习
html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...
- div定位relative和absolute测试1
div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...
- div定位relative和absolute测试2
之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...
- ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效
ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"& ...
- 网页制作过程中div定位的三个问题
这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...
- 同级、父子级div定位
以两个div右上角对齐为例: 效果图: 1.同级定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- 一个DIV相对于另一个DIV定位
<div style="position:relative"><div style="position:absolute; top:0px; left: ...
- div定位relative和absolute和float测试3
position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了 ...
随机推荐
- 腾讯微博OAuthV2认证实现第三方登录
1)添加相关jar包: httpmime.jar 以下信息是必须的 //!!!请根据您的实际情况修改!!! 认证成功后浏览器会被重定向到这个url中 必须与注册时填写的一致 private Strin ...
- 《Windows驱动开发技术详解》之定时器
I/O定时器 I/O定时器是DDK提供的一种定时器.它每个1s钟系统会调用一次I/O定时器例程.I/O定时器例程运行在DISPATCH_LEVEL级别,因此在这个例程中不能使用分页内存,否则会引起页故 ...
- Windows线程同步（下）
线程同步三:事件 CreateEvent:Creates or opens a named or unnamed event object. HANDLE WINAPI CreateEvent( _I ...
- VBS虚拟键码
1 VK_LBUTTON 鼠标左键 2 VK_RBUTTON 鼠标右键 3 VK_CANCEL Ctrl+Break(通常不需要处理) 4 VK_MBUTTON 鼠标中键 8 VK_BACK Back ...
- Eclipse 安装最新SVN插件
本文来源:http://liujianqiao398.blog.163.com/blog/static/181827257201331194610634/ Eclipse 安装最新SVN插件 2013 ...
- linux下MMC/SD/SDIO驱动系列之二 ---- host注册过程（一）
参考了 http://blog.csdn.net/xieweihua2012/article/details/12844733 在他的基础上更详细的解析源 ...................... ...
- Parade
Parade time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
- LightOJ 1336 Sigma Function 算数基本定理
题目大意:f(n)为n的因子和,给出 n 求 1~n 中f(n)为偶数的个数. 题目思路:算数基本定理: n=p1^e1*p2^e1 …… pn^en (p为素数): f(n)=(1+p1+p1^2+ ...
- Hadoop RPC机制
RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.Hadoop底层的交互都是通过 rp ...
- Notes over compiling..
When compiling VIM on windows, using nmake may be a better choice.. Because so far my attempts to co ...