《1》
没有浮动的盒子是一个标准流,而浮动的盒子是一个非标准流 。
特别说明:
绝对定位是对离自己最近的那个非标准流盒子而言的。 (对一个盒子使用了浮动,相对定位,或者绝对定位,那么这个盒子就变成了一个非标准流的盒子了)
当我们要使用绝对定位的时候,必须要有两个条件
1》必须给父元素加定位属性,一般建议使用 position:relative(即:给父元素设为相对定位);
2》给子元素,加绝对定位position:absolute(给子元素设置为绝对定位); 同时加方向属性(top ,left,rigth,bottom)
绝对定位是以父元素为基准点,进行定位(如果他没有父元素,或者它的父元素没有设置position:relative属性)它就会以<body>为基准点进行定位。绝对定位会脱离文档流(即:他浮动起来了,不再占据原来的位置了)
绝对定位
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width:500px;
height:500px;
border:1px solid red;
margin:0px 250px;
}
#a {
background-color: red;
}
#b {
background-color: green;
top:100px;
left:100px
}
#c {
background-color: blue;
height:150px;
width:150px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
《2 给子元素添加绝对定位,不给父元素添加相对定位,那么子元素进行绝对定位就是以body为基准进行定位的》
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width:500px;
height:500px;
border:1px solid red;
margin:0px 250px;
/*position:relative;*/ /*不给父元素设置相对定位,那么子元素就会以body为基准进行定位*/
}
#a {
background-color: red;
}
#b {
background-color: green;
top: 100px;
left: 100px ;
position:absolute; /*给B设置绝对定位*/
}
#c {
background-color: blue;
height:150px;
width:150px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
《3最终效果图,给父元素添加相对定位,给子元素添加绝对定位,那么子元素进行绝对定位就是以父元素为基准进行定位的》
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width:500px;
height:500px;
border:1px solid red;
margin:0px 250px;
position:relative; /*给父元素设置相对定位,那么子元素进行绝对定位的时候就会以父元素为基准进行定位*/
}
#a {
background-color: red;
}
#b {
background-color: green;
top: 100px;
left: 100px ;
position:absolute; /*给B设置绝对定位*/
}
#c {
background-color: blue;
height:150px;
width:150px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
相对定位
相对定位是相对于自己原来的位置而言的
当设了相对的偏移量之后,这个DIV原来所占据的位置(文档流)不会被下面的DIV块挤占,而是空在那里;当偏移后向下或者向右的内容会被隐藏,
不对B盒子使用相当定位的时候B的位置(如下)
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 0px 250px;
}
#a {
background-color: red;
float:left;
margin:10px;
}
#b {
background-color: green;
float: left;
margin: 10px;
/*position:relative;*/
/*top:120px;*/
/*left:50px;*/
}
#c {
background-color: blue;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
对B盒子进行相对定位的时候B的位置(如下)
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 0px 250px;
}
#a {
background-color: red;
float:left;
margin:10px;
}
#b {
background-color: green;
float: left;
margin: 10px;
position:relative; /*在这里我们使用了对#b元素的相对定位*/
top:120px; /*在原来的位置,向下移动120px (如果希望向上移动,则值就是负数,如:top:-120px)*/
left:50px; /*在原来的位置,向右移动50px (如果希望向左移动,则值就是负数,如:left:-50px)*/
}
#c {
background-color: blue;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>