24_css定位布局_绝对定位.html

<!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>无标题文档</title>


<style type="text/css">

body,div{

margin:0;

padding:0;

}

#main{

border:1px solid blue;

width:500px;

height:500px;

margin:100px auto;

position:relative;<!--当我们要想使用绝对定位时,必须要有两个条件:

1.必须给父元素加定位属性,一般建议使用position:relative;

2.给子元素加绝对定位position:absolute;同时要加方向属性。

-->

}

#one{

width:100px;

height:100px;

background:red;

}

#two{

width:100px;

height:100px;

background:green;

position:absolute;

top:100px;

left:100px;

}

#three{

width:100px;

height:100px;

background:blue;

}

</style>


</head>


<body>

<div id="main">

<div id="one">1</div>

<div id="two">2</div>

<div id="three">3</div>

</div>

</body>

</html>



你可能感兴趣的:(24_css定位布局_绝对定位.html)