css中position的absolute與relative的使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>position</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!--方式一結果：第二個div以瀏覽器爲參照物-->
<div style="position:relative;width:200px;height:300px;background:yellow;"></div>
<div style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;background:red;"></div>
<!--方式二結果：第二個div以第一個div爲參照物，在第一個div裏面-->
<div style="position:relative;width:200px;height:300px;background:yellow;"></div>
<div style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;background:red;"></div>
</div>
<!--方式三結果：第二個div以第一個div爲參照物，在第一個div裏面，此時bottom屬性並會向上起作用-->
<div style="width:200px;height:300px;background:yellow;"></div>
<div style="position:relative;left:20px;bottom:20px;width:100px;height:100px;background:red;"></div>
</div>
</body>
<html>
方式一、
方式二、
方式三、