We would like to know how to make inner child relative to its parent.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#box {<!--from w w w.ja v a 2 s. c o m-->
width: 200px;
height: 200px;
margin: 30px;
position: relative;
background:#EEE;
}
#box>div.corner {
display: block;
position: absolute;
width: 50px;
height: 50px;
}
.top {
top: 0px;
border-top-style: solid;
}
.bottom {
bottom: 0px;
border-bottom-style: solid;
}
.left {
left: 0px;
border-left-style: solid;
}
.right {
right: 0px;
border-right-style: solid;
}
</style>
</head>
<body>
<div id="box">
<div class="corner top left"></div>
<div class="corner top right"></div>
<div class="content">content</div>
<div class="corner bottom left"></div>
<div class="corner bottom right"></div>
</div>
</body>
</html>
The code above is rendered as follows: