請(qǐng)問(wèn).box中position:relative的作用是什么呢
form?{
??border:?1px?solid?#ccc;
??padding:?20px;
??width:?300px;
??margin:?30px?auto;
}
.wrapper?{
??margin-bottom:?10px;
}
.box?{
??display:?inline-block;
??width:?30px;
??height:?30px;
??margin-right:?10px;
??position:?relative;????????????/*就是這里*/
??background:?orange;
??vertical-align:?middle;
??border-radius:?100%;
}
.box?input?{
??opacity:?0;
??position:?absolute;
??top:0;
??left:0;
??width:?100%;
??height:100%;
??z-index:100;/*使input按鈕在span的上一層，不加點(diǎn)擊區(qū)域會(huì)出現(xiàn)不靈敏*/
}
.box?span?{?
??display:?block;
??width:?10px;
??height:?10px;
??border-radius:?100%;
??position:?absolute;
??background:?#fff;
??top:?50%;
??left:50%;
??margin:?-5px?0??0?-5px;
??z-index:1;
}
input[type="radio"]?+?span?{
??opacity:?0;
}
input[type="radio"]:checked?+?span?{
??opacity:?1;
}去掉就沒法用了，這里到底是起到什么作用呢？
2016-07-12
.box?{
??display:?inline-block;
??width:?30px;
??height:?30px;
??margin-right:?10px;
??position:?relative;????????????/*就讓.box下面的子元素相對(duì)于它來(lái)絕對(duì)定位,如果不加這個(gè),那么.box下面的子元素就相對(duì)于html標(biāo)簽來(lái)絕對(duì)定位*/
??background:?orange;
??vertical-align:?middle;
??border-radius:?100%;
}
.box?input?{
??opacity:?0;
??position:?absolute;/*相對(duì)于父級(jí)含有 position屬性的元素定位*/
??top:0;
??left:0;
??width:?100%;
??height:100%;
??z-index:100;
}
出于對(duì)回答者的認(rèn)同和尊重，解決了你的問(wèn)題，請(qǐng)采納，謝謝