为了账号安全,请及时绑定邮箱和手机立即绑定

下面这两段代码的作用是什么啊?为什么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;
}


正在回答

2 回答

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


0 回复 有任何疑惑可以回复我~

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


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信