請問.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的上一層，不加點擊區域會出現不靈敏*/
}
.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下面的子元素相對于它來絕對定位,如果不加這個,那么.box下面的子元素就相對于html標簽來絕對定位*/
??background:?orange;
??vertical-align:?middle;
??border-radius:?100%;
}
.box?input?{
??opacity:?0;
??position:?absolute;/*相對于父級含有 position屬性的元素定位*/
??top:0;
??left:0;
??width:?100%;
??height:100%;
??z-index:100;
}
出于對回答者的認同和尊重，解決了你的問題，請采納，謝謝