div定位

时间：2022-08-29 19:27:09

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&plus;DIV定位分析&lpar;relative&comma;absolute&comma;static&comma;fixed&rpar;

    在用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. JAVA设计模式之3-抽象工厂模式

    书接上文,简单工厂模式解决的是可以枚举种类的类的问题,但是带来了高耦合的问题,并且对类系列繁多无从下手,那么我们想起了一种方法,那就是抽象类,建一个抽象工厂,抽象工厂里的方法都是根据系列类的差异区分出 ...

  2. Oracle库Delete删除千万以上普通堆表数据的方法

    需求:Oracle数据库delete删除普通堆表千万条历史记录. 直接删除的影响: 1.可能由于undo表空间不足从而导致最终删除失败的问题: 2.可能导致undo表空间过度使用,影响到其他用户正常操 ...

  3. 阿里 RocketMQ 安装与简介

    一.简介 官方简介: l  RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: l  能够保证严格的消息顺序 l  提供丰富的消息拉取模式 l  高效的订阅者水平扩展能力 l  实时的 ...

  4. SQL Server复制需要有实际的服务器名称才能连接到服务器

    服务器上安装的WIN2008 R2,然后没有在意机器名,安装了SQL2008 R2数据库之后,配置AD域的时候修改了机器名. 然后,开始配置数据库镜像同步的时候,先试了下数据库复制发布,结果提示“SQ ...

  5. &lbrack;原&rsqb;五分钟搭建gitserver

    本来在忙一些事情,结果刚才突然收到一个临时的事情,号称很着急. 问了一下,原来是需要在本地搭建一个git库,但其实之前我是有做过gitserver的,不过是在阿里云(部分分布在青云)上,而且目前在使用 ...

  6. webservice wsdl 生成服务

    由于之前的示例是在当前项目下发布的server,也是在当前项目下访问的server发布的webservice.但在实际应用中,我们的服务端往往是和客户諯分离的,甚至它们是不同的项目中不同的人写的.而像 ...

  7. 1657&colon; &lbrack;Usaco2006 Mar&rsqb;Mooo 奶牛的歌声

    1657: [Usaco2006 Mar]Mooo 奶牛的歌声 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 526  Solved: 365[Submi ...

  8. Swift基础之音乐播放随机变换着色板

    今天的内容比较简单,我也就不做详细的文字介绍了,直接上代码,希望对大家有所帮助 var audioPlayer = AVAudioPlayer()    //梯度配色    let gradientL ...

  9. Ansible 插件 操作介绍

    一.Ansible 插件 之 [统计任务处理时间] 在做性能优化之前首先需要做的是收集一些统计数据,这样才能为后面做的性能优化提供数据支持,对比优化前后的结果.非常不错的是,在 github 发现一个 ...

  10. es5原型式继承间解

    1. 原型式继承方法 js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚. es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条: 子类继承父类,主 ...

相关文章