下面这两段代码的作用是什么啊？为什么position设置为absolute？还有。。。。
来源：7-3 CSS3选择器 :checked选择器
白帽子
2015-12-25 23:08
.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;
}
写回答
关注
2回答
-
- 大年糕
- 2017-10-10 16:26:13
这个是relative和absolute的组合使用，.box中加入了position:relative（相对定位）即：不脱离文本文档流相对原来的位置定位，.box的子元素input和span 定义了position:absolute（绝对定位）脱离文本文档流相对于.box进行定位。具体的解释 你可以看一下 前端课程里的 HTML/CSS基础课程 的12-9那节课！
-
- Charless
- 2015-12-27 21:22:52
不这样的话z-index无效，z-index依赖于position：relative，或者position：absolute。
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242554 学习 · 2623 问题
相似问题