position:relative与float的区别。relative、absolute和float 。div定位 position （relative、absolute）嵌套漂浮float 探索

最新推荐文章于 2024-07-28 17:38:46 发布

hljqfl

最新推荐文章于 2024-07-28 17:38:46 发布

阅读量1.6k

点赞数 2

分类专栏： JS-CSS

本文链接：https://blog.csdn.net/hljqfl/article/details/86478133

版权

JS-CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

position:relative与float的区别

postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

二者之中最大的差别就是位置保留。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

float定位：

<style>

*{border:1px solid #eee;}

body{

border-color:#09f;

}

ul{list-style:none;}

li{float:left;}

#li1{width:200px;height:200px;border-color:red;left:50px;}

#li2{width:200px;height:150px;border-color:green;}

#li3{width:200px;height:100px;border-color:blue;}

</style>

</ul>

position:relative定位：

<style>

*{border:1px solid #eee;}

body{

border-color:#09f;

}

ul{list-style:none;width:800px;height:400px;margin:0 auto; border-color:black;}

li{position:relative;}

#li1{width:200px;height:200px;border-color:red;top:20px;left:80px;}

#li2{width:200px;height:150px;border-color:green;}

#li3{width:200px;height:100px;border-color:blue;}

</style>

</ul>

.A{ position:absolute;widtH:800px; height:1000px;background-color:#063; color:#FFF}

.A .B{ position: relative; float: left; top:50px;widtH:500px; height:100px;background-color: #0F9; color:#FFF}

.A .B .B1{ position: absolute; top:0px;widtH:400px; height:50px;background-color: #9F0; color:#FFF}

.A .C{ position: relative;float: left; left:10px;top:0px;width:70px; height:100px;background-color: #F06; color:#FFF}

</style>

</head>

<body>

<div class="A">AAAA

</div>

</body>

</html>

=============================================================================

relative、absolute和float

position:relative和position:absolute都可以改变元素在文档中的位置，都能激活元素的left、top、right、bottom和z-index属性。（默认这些属性未激活，设置了也无效）

　　设置position:relative和position:absolute都会让元素浮起来，会改变正常情况下的文档流。

　　不同：

　　position:relative会保留自己在z-index:0层的占位，left、top、right、bottom值是相对于自己在z-index层的位置。

　　position:absolute会完全脱离文档流，不再z-index:0层保留占位符，其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的，如果祖先元素全都没有设置，那么就相对于body元素。

　　float也能改变文档流，不同的是，float不会让元素浮到另一个元素上面，它仍然让元素在z-index:0层排列，只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列，影响周围元素。

　　position:absolute和float会隐式的改变display类型，不论之前什么类型的元素（display:none除外）,只要设置了position:absolute和float中任何一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算显示的设置display:inline或者display:block，也仍然无效（IE6双倍边距BUG利用display:inline解决）。

　　position:relative却不会隐式改变display类型。

===========================================================================================

div定位 position （relative、absolute）嵌套漂浮float 探索总结

假设大块内部包含着小块，

用margin！

先看大块div的情况，

要想实现div一个接着一个，那就什么都不用设置，就是默认的但不需要显示的默认设置position：static；如果要让大块div之间有间隔或者相对偏移一定尺寸，需要用margin！而不是positionrelative，下面就讲position：relative的特点：

relative的特点：

relative的作用，就是在其默认显示的位置的基础上，偏移一定的尺寸，可以是上下左右四个参数来设置。但是这个偏移是悄悄的，只有它自己知道，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置，就像放风筝，风筝随着风向的改变而偏移relative了一定距离，而实际人还是站在原来的位置，且所占用的平面面积不变。其后的其它div假设是div2会以地面位置参照接着之前的div1继续显示，但是如果div1是向下偏移了，那么就会导致div2会覆盖掉一部分的div1，如果希望此时div2能接着div1显示，那么div2也要与div1相等的量向下偏移，……假设后面还有div3呢，div3依然认为div1、div2还在原来的位置，所以div3接着原来的位置继续显示，可惜因为div1和div2都向下偏移了，所以div3就与div2重叠了2倍的div1的偏移距离，要想使div3能够接着div2显示，则div3应该也用relative，且向下偏移量是div1和div2的加和……之后同理。

如果div的position设置了relative属性，但是没有指定偏移量，则相当于默认的position：static。

position：absolute的特点：

当一个大div0里面有多个小div1-5共5个，从上到下依次显示着。

此时加入希望其中第三个即div3能不考虑其它四个div（1、2、4、5）的位置，自己能独立的在大div0里面的任意位置显示（以大div0的左上角为参考点），也不需要像relative那样复杂的计算（relative多个时须叠加计算麻烦），那么就需要用到绝对定位。

但是添加了绝对定位以后，假如发现div3跑到了以浏览器显示区域左上角为参考原点，以所指定的偏移量为偏移量的位置，则我们需要在大div0那里加上position：relative（但不指定具体偏移量），这样设置后div3的偏移就是以大div0的左上角作为偏移原点。

同时用absolute偏移了的div3不再占用了原来的位置，原来的位置由div4去接着显示。

float

如果希望div能够在水平方向连续显示，则应该把div加上float，可以左对齐，也可以右对齐，

假设总共三个div，

第三个不希望与前两个一样显示在同一行，而是希望自己单独起一行，则div3应设置clear：both。

div尺寸的特殊设置

div的尺寸可以设置成其祖先元素的百分比的形式，还可以设置minheight的最小高度这样的形式。

【【【【【【【【【【【【【【【

直接复制下面html代码去测试，你会有收获的……

<html>

<head>
<title>
ceshi
</title>
<script type="text/javascript">
function findPosX(intId)
{
var obj = document.getElementById('div' + intId);
var curleft = 0;
if (obj.offsetParent) //ymq2013：貌似是假如div有父亲，即自身被嵌套
{ while (obj.offsetParent)
{ curleft += obj.offsetLeft;//ymq2013：取得相对于所嵌套的上级的左边距
obj = obj.offsetParent;//ymq2013：然后取得其父亲对象，稍后会用到
}
} else if (obj.x) //else if与上面的if不是选择分支关系，而是顺序执行关系
curleft += obj.x;//取得其父亲的x坐标，并累加到curleft变量中
alert(curleft); //
return curleft;
}

</script>

</head>


<body id="documentBody" style="border: thin solid #000FF0; margin-top:0; margin:20px; background-color:lightgrey">
<div>
<div id="div1" style="margin-top:100px;margin-left:100px; height:290px; width:200px; background-color:#FF0000; ">
<span id="span1">
Placeholder text 1.
</span>
<div id="div1_1" style=" width:50px; height:150px; background-color:#FFFF00 ">
1_1
<br />
高度在50与250切换看效果
</div>
<div id="div1_2" style="position:relative;top:10px;left:10px; width:50px; height:50px; background-color:#999999 ">
1_2
</div>
<div id="div1_3" style="position:relative;top:0px; width:50px; height:80px; background-color:#990099 ">
1_3
</div>
</div>

<div id="div2" style="position:relative; height:300px; width:200px; background-color:#00FF00;">
<span id="span2">
body级别次级的大div- 2.
</span>
<div id="div2_1" style=" width:50px; height:150px; background-color:#FFFF00 ">
2_1
<div id="div2_1_1" style="position:absolute;top:50px;left:60px; width:50px; height:50px; background-color:#999999 ">
2_1_1
</div>
</div>
<div id="div2_2" style="position:absolute;top:10px;left:10px; width:50px; height:50px; background-color:#999999 ">
2_2
</div>
<div id="div2_3" style="position:relative;top:10px; width:50px; height:50px; background-color:#999999 ">
2_3
</div>
</div>

<div id="div3" style="margin-top:100px;margin-left:100px; height:350px; width:200px; background-color:#0000FF;">
<span id="span6">
Placeholder text 3.
</span>
<div id="div4" style="margin-top:0px;margin-left:100px; height:200px; width:200px; background-color:#00FFFF;">
<span id="span3">
Placeholder text 4.
</span>
<div id="div4_1" style="float:left; margin-left:30px;height:50px; width:50px; background-color:#CC3399; ">
4_1
</div>
<div id="div4_2" style="float:left; height:50px; width:50px; background-color:#FFFF00; ">
4_2
</div>
<div id="div4_3" style="float:right;height:50px; width:50px; background-color:#FF00FF; ">
4_3
</div>
<div id="div4_4" style="clear:both;height:50px; width:50%; background-color:#FF00FF; ">
4_4
</div>
</div>
</div>

<div id="div5" style="min-height:120px; width:100px; background-color:#00FF00;">
<span id="span4">
Placeholder text 5.
</span>
<div id="div5_1" style="margin-left:20px; height:250px; width:150px; background-color:#FF00FF; ">
5_1
</div>
</div>

<div id="div6" style="height:100px; width:100px; background-color:#0000FF;">
<span id="span5">
Placeholder text 6.
</span>
</div>

<div id="note" style="position:relative; top:100px; left:100px; border-color:#000000; border-bottom-width:1px; width:800px; height:200px; background-color:#669933">
<p…… <="">vbvbvbv
</p……>
</div>

<div style="position:absolute; top:0px; left:400px;">
<input type="button" value="单击1" οnclick="javascript:findPosX(1)" />
<input type="button" value="单击2" οnclick="findPosX(2)" />
<input type="button" value="单击3" οnclick="findPosX(3)" />
<input type="button" value="单击4" οnclick="findPosX(4)" />
<input type="button" value="单击5" οnclick="findPosX(5)" />
</div>

</div>
</body>

</html>

=================================================================

display:block的作用与用法

display:block可以理解为块。用个简单的例子给你！比如你做一个超链接，
<li><a href="#">超链接</a></li>
当你鼠标移过去文字的时候，超链接有效果！
而当我把样式这样设置：
li a{width:100px;height:100px; display:block; color:red; text-decoration:none;}
鼠标移到文字周围100*100的地方，就有超链接效果了，就是把100*100做为一块来的超链接！

display    的参数列表
   display版本：CSS1/CSS2　    兼容性：IE4+    NS4+　继承性：无


   语法：

   display: block    |    none    |    inline    |    compact    |    marker    |
   inline-table    |    list-item    |    run-in    |    table    |table-caption    |
   table-cell    |    table-column    |    table-column-group    |
   table-footer-group    |    table-header-group    |    table-row    |    table-row-group

   参数：

   block    :    　CSS1　块对象的默认值。用该值为对象之后添加新行
   none    :    　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
   inline    :    　CSS1　内联对象的默认值。用该值将从对象中删除行
   compact    :    　CSS2　分配对象为块对象或基于内容之上的内联对象
   marker    :    　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before    伪元素一起使用
   inline-table    :    　CSS2　将表格显示为无前后换行的内联对象或内联容器
   list-item    :    　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
   run-in    :    　CSS2　分配对象为块对象或基于内容之上的内联对象
   table    :    　CSS2　将对象作为块元素级的表格显示
   table-caption    :    　CSS2　将对象作为表格标题显示
   table-cell    :    　CSS2　将对象作为表格单元格显示
   table-column    :    　CSS2　将对象作为表格列显示
   table-column-group    :    　CSS2　将对象作为表格列组显示
   table-header-group    :    　CSS2　将对象作为表格标题组显示
   table-footer-group    :    　CSS2　将对象作为表格脚注组显示
   table-row    :    　CSS2　将对象作为表格行显示
   table-row-group    :    　CSS2　将对象作为表格行组显示

============================================================================================

display:inline、block、inline-block的区别

display:block就是将元素显示为块级元素.

　　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

　　display:inline就是将元素显示为行内元素.

　　inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

　　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

　　让一个inline元素从新行开始；
　　让块元素和其他元素保持在一行上；
　　控制inline元素的宽度（对导航条特别有用）；
　　控制inline元素的高度；
　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。

　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

　　inline-block的元素特点：

　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

　　IE下块元素如何实现display:inline-block的效果？

　　有两种方法：
　　1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

　　div {display:inline-block;...}
　　div {display:inline;}

　　2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

　　div {display:inline; zoom:1;...}

　　以下用个例子来说明三者的区别和用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>display:inline、block、inline-block的区别</title>
</head>
<style>
div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
.b{display:block;}
.i{display:inline;}
div.ib{display:inline-block;}
div.ib{display:inline;}
a.ib{display:inline-block;}
a.ib{display:block;}
span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
</style>
<body>
<div>div display:block</div>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block</div>
<span>span display:inline</span>
<span class="b">span display:block</span>
<span><a class="ib">a display:block</a></span><br />
<div><span class="v"></span>vertical-align:middle</div>
</body>
</html>