<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*紧靠浏览器
*{
margin: 0px;
padding: 0px;
} */
.aaa{
width: 600px;
height: 600px;
background-color: #00FFFF;
/* 相对定位 相对于原来位置的定位 但是移动位置相对与原来的位置 位置依然保留*/
/* 只是加上相对定位才能为绝对定位当爹 */
position: relative;
/*跟随浏览器 剧中 */
margin: 0px auto;
}
.bbb{
width: 600px;
height: 600px;
background-color: #0000FF;
}
.ccc{
width: 100px;
height: 100px;
background-color: #00FFFF;
/* absolute 绝对定位 会脱标 相对于父亲的定位
绝对定位找最近一级的相对定位找爹*/
position: absolute;
}
.abc{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;
right: 0px;
}
.bcd{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;
right: 0px;
bottom: 0px;
}
.kkk{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;
left: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="aaa">
<div class="bbb">
<div class="ccc"></div>
<div class="abc"></div>
<div class="kkk"></div>
<div class="bcd"></div>
</div>
</div>
</body>
</html>
