為什么input的css樣式里，不放position:absolute;按鈕就失靈？
<!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;/*去掉這個(gè)的話，按鈕就失靈了，這是為什么呢？？*/
? ? ? ? ? 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><!--為了男這個(gè)選項(xiàng)與女這個(gè)選項(xiàng)好區(qū)分使用的兩個(gè)div塊-->
<input type="radio" name="sex"/><span></span><!--當(dāng)input設(shè)置為透明時(shí)，使用span來實(shí)現(xiàn)被選中的效果-->
</div>
<label>男</label>
<div>
<input type="radio" name="sex"/><span></span>
</div>
<label>女</label>
</div>
</body>
</html>
2015-11-12
使用絕對定位脫離了文檔流，?可以覆蓋頁面上的其它元素。嗯， 應(yīng)該是這樣的。
2015-11-12
position: absolute 防止按鈕脫離文檔流，因?yàn)槟闱懊嬗玫搅烁觺