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. Chapter 2 Open Book——8

    But as far as I could tell, life worked that way most of the time. 但是即使我这么说,生活大多数时间还是这样的. 但就我所能告诉你的, ...

  2. 《Java Mail》

    <Java Mail> 文/冯皓林 完稿:2016.3.16--2016.3.19 “特定环境.一类问题.N个解决方案” 一.RFC821文档说明 核心: 邮件(Mail): 1.邮件头( ...

  3. 用 gulp.spritesmith 自动化雪碧图

    一.安装nodejs之后,要设置两个环境变量 在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口 新建2个环境变量,它们的值分别是nodejs根目录下的node_modules路径 ...

  4. 在Service服务中请求网络

    一.startservice方式启动 第一次startservice启动服务的时候,会走oncreate和onstart方法, 第二次startservice启动服务的时候,会走onstart方法, ...

  5. ASP.NET页面生命周期描述

    下面是ASP.NET页面初始的过程:1. Page_Init();2. Load ViewState;3. Load Postback data;4. Page_Load();5. Handle co ...

  6. PCI源码学习笔记

    这个是PCI的关键结构体. static const struct file_operations proc_bus_pci_operations = { .owner = THIS_MODULE, ...

  7. yum no key

    http://serverfault.com/questions/525958/redhat-yum-install-gpg-key-retrieval-failed

  8. 笨方法学python--简介

    该章提到编程新手所需的三种最重要的技术:读和写,注重细节,发现不同. 读 和 写 即熟悉代码中的各种字符. 注 重 细 节 将例子一字不差地打出来,通过实践训练自己 发 现 不 同 这个是通过长年累月 ...

  9. MVC 和 MVVM

    MVVM MVVM 是 Model-View-ViewModel 的简写,MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model) MVC 回顾 MVC 结构图 MVC ...

  10. c语言库函数

    #include <stdio.h> #define LENGTH 100 main() { FILE *fd; char str[LENGTH]; fd = fopen("he ...