问答详情
源自：7-3 CSS3选择器 :checked选择器

下面这两段代码的作用是什么啊？为什么position设置为absolute？还有。。。。

.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;
}


提问者：白帽子 2015-12-25 23:08

个回答

  • 大年糕
    2017-10-10 16:26:13

    这个是relative和absolute的组合使用，.box中加入了position:relative（相对定位）即：不脱离文本文档流相对原来的位置定位，.box的子元素input和span 定义了position:absolute（绝对定位）脱离文本文档流相对于.box进行定位。具体的解释 你可以看一下 前端课程里的 HTML/CSS基础课程 的12-9那节课！


    0
  • Charless
    2015-12-27 21:22:52

    不这样的话z-index无效，z-index依赖于position：relative，或者position：absolute。


    0