谈谈这一周遇到的坑

(⊙﹏⊙)或者不叫坑 叫自己基础不扎实带来的BUG

第一个：position:relative会提升元素层叠顺序

---业务是实现一个单选框位于卡片列表的右边20px 垂直居中 当时想到的是用定位 用父元素position:relative ** + 子元素position:absolute** 的再加上tranfrom:translate() 就基本能实现脱离文档流 

--BUG：卡片直接覆盖了顶部栏(移动端) position:relative的问题 查了资料是说z-index可以解决 我试了 把卡片z-index:1(不知道标题栏的z-index多少) 不行 只有z-index:-1才可以 但是z-index:-1后直接都操作不到卡片了直接变成图层最底层了 pass！ 可能还有其他解决之法 我这小白就研究不透了 有其他办法希望各位大哥能指导下

--解决： 后面是换成flex 每个卡片下title之后 flex布局 分为两个模块 一个左边一个右边

左边位文本模块右边点选框模块设置flex-grow:1 (只有他分配会把剩余空间全吃了) 单选框align-item:center 完美解决！

第二个：tranfrom 会提升元素层叠顺序

---经过上面一套操作后 我觉得小白点还是位置不对 为什么呢 因为title也算卡片内的 卡片的高度=title+下面的text 所以小白点的align-item:center就有点不居中了 直接想到的就是 tranfrom:translate(0,-50%) 我以为大功告成了 可惜可惜第二天导师就告诉我 有bug

--BUG 小白点会覆盖头部栏

--解决 tranfrom改成padding。。。 就是这么简单 我真的小辣鸡