<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{background: gray;}
#con{
height: 50px;
width: 230px;
padding: 20px;
margin: 50px auto;
}
#con .man{
width: 50px;
height: 50px;
float: left;
border-radius: 100%;
background:orange;
position: relative;
margin-left: 20px;
}
#con input{
position: absolute;/*去掉这个的话，按钮就失灵了，这是为什么呢？？*/
opacity: 0;
width: 100%;
height: 100%;
z-index:100;
}
#con .wom{
width: 50px;
height: 50px;
float: left;
margin-left: 30px;
border-radius: 100%;
background: orange;
position: relative;
}
#con label{
display: block;
float: left;
font-size: 24px;
font-weight: bold;
font-family: 微软雅黑;
margin-left: 10px;
margin-top: 10px;
}
#con span{
width: 25px;
height: 25px;
display: block;
position: absolute;
top:10px;
left: 10px;
background: yellow;
border-radius: 100%;
}
input[type="radio"]+span{
opacity: 0;
}
input[type="radio"]:checked+span{
opacity: 1;
}
</style>
</head>
<body>
<div id="con"><!--为了主体布局而使用的div-->
<div><!--为了男这个选项与女这个选项好区分使用的两个div块-->
<input type="radio" name="sex"/><span></span><!--当input设置为透明时，使用span来实现被选中的效果-->
</div>
<label>男</label>
<div>
<input type="radio" name="sex"/><span></span>
</div>
<label>女</label>
</div>
</body>
</html>
使用绝对定位脱离了文档流， 可以覆盖页面上的其它元素。嗯， 应该是这样的。
position: absolute 防止按钮脱离文档流，因为你前面用到了浮动~