转载

div定位

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>

 

转载于:https://www.cnblogs.com/lxboy2009/p/3776360.html

正文到此结束
本文目录