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. 编译OpenGL代码时发生 Inconsistency detected by ld.so: dl-version.c: 224: _dl_check_map_versions: Assertion `needed != ((void *)0)' failed! 错误的解决方案

    注:本解决方案适用于使用N卡的PC 出现该错误 , 一般是由于开源的nouveau驱动和Nvidia专有驱动冲突导致的 .在解决该问题时 , 尝试过卸载 N 卡专有驱动 , 仅使用开源nouveau驱 ...

  2. javascript 如何正确使用getElementById，getElementsByName(), and getElementsByTagName()

    WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签. (1)get ...

  3. glusterfs——volume管理

    Q: 常用的命令有哪些? 创建volume: gluster volume create NAME stripe SCOUNT replica RCOUNT transport TYPE  BRICK ...

  4. sql server基础学习之引号

    create table #(code varchar(20),value int)declare @sql varchar(200) set @sql='insert into # select ' ...

  5. 工控中的windows

    今后的windows如何在工业应用中发展,之前的windows如何保证安全的运行,如果只专注于消费,生产上是否还需要windows,如果那样,windows真的只有windows了

  6. rs.Open sql,conn,0,2,1

    例子:rs.Open sql,conn,0,2,1 CursorType = 0,默认值,打开仅向前类型游标.LockType = 2, 开放式锁定Options = 1, 指示 ADO 生成 SQL ...

  7. Java学习笔记之基于TCP协议的socket

    可以一直输入,而不是一问一答: 开两个线程,一个负责收,一个负责发. 1.先运行: package com.zr.javase0825; import java.io.BufferedReader; ...

  8. mybatis 的一点问题

    写法1:   public User queryUserByUsername(String username); 写法2:   public User queryUserByUsername(@Par ...

  9. makefile中使用echo向文件中输出版本号和编译时间

    @echo "#define BUILD_TIME" `date +"%F_%H:%M:%S"` > buildTime_svnVer.h @echo & ...

  10. 《云阅》一个仿网易云音乐UI，使用Gank.Io及豆瓣Api开发的开源项目

    CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...