<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位练习1</title>
<style type="text/css">
.con{
width:100px;
height:100px;
background-color:gold;
margin:50px auto 0; position:relative;
border-radius:14px; /* 角是圆的 */
} .box{
width:28px;
height:28px;
background-color:red;
color:#fff;
text-align: center;
line-height:28px; position:absolute;
left:86px;
top:-14px; border-radius:14px; /* 圆形 */
}
</style>
</head>
<body>
<div class="con">
<div class="box">5</div>
</div>
</body>
</html>
页面效果：