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定位的更多相关文章

  1. html中div定位练习

    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...

  2. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

  3. div定位relative和absolute测试2

    之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. ...

  4. ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效

    ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"& ...

  5. 网页制作过程中div定位的三个问题

    这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...

  6. 同级、父子级div定位

    以两个div右上角对齐为例: 效果图: 1.同级定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  8. 一个DIV相对于另一个DIV定位

    <div style="position:relative"><div style="position:absolute; top:0px; left: ...

  9. div定位relative和absolute和float测试3

    position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了 ...

随机推荐

  1. 反编译app方法

    如果你没有代码,那么可以反编译该app. 这里将用到2个工具,分别是dex2jar和jd-gui.你可以在这里下载目前为止的最新版本以及示例apk. 我们以工具包里的ContactManager.ap ...

  2. linux中tar 打包指定路径文件

    linux中tar打包指定路径文件www.111cn.net 编辑:yahoo 来源:转载在linux系统中打包与解压文件我都可以使用tar命令来解决,只要使用不同的参数就可以实现不同的需要了,下面来 ...

  3. js 条件判断放大字体

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  4. OpenCV成长之路：直线、轮廓的提取与描述

    http://ronny.blog.51cto.com/8801997/1394139 OpenCV成长之路:直线.轮廓的提取与描述 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 . ...

  5. kindle使用参考

    转载链接:http://blog.sina.com.cn/nuanfengjia 今天买的kindle499刚刚到货了,体验略差,还有一个就是无按键,完全不会玩,只能自己慢慢摸索了. [新Kindle ...

  6. 脚本添加crontab任务【转】

    今天朋友问,计划任务是用crontab -e来添加的,如何使用脚本来添加呢? 在执行crontab -e命令时,会在/var/spool/cron目录下创建一个文件,文件的名称是你当前的用户名,内容就 ...

  7. ajax学习之post请求步骤

    ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...

  8. 《Head.First设计模式》的学习笔记（9）－－外观模式

    意图:为子系统中的一组接口提供一个一致的界面,Facade 模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 结构: 例子: 假设你有一套杀手级的家庭影院系统,内含DVD播放器.投影仪.自 ...

  9. 转：12C PDB 配置不同的PDB监听端口

    How to Define PDB Listeners With Different Ports In A Multitenant Setup Goal This Note will discuss ...

  10. OpenGL—Android 开机动画源码分析一

    .1 Android开机动画实现方式目前实现Android开机动画的方式主要是逐帧动画和OpenGL动画. ?逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的 ...