第一类：
刚开始的思路是：让上面的选中的选项背景变成白色，让下面的层position:absolute;z-index:-1;top:1px,就能盖得上上面的横线。实践证明，这样是能盖得上，但是单选按钮不能点了。
正确的思路应该是：上面的选项切换大层应该使用定位position:relative,里面的选项应该用position:absolute将其位置定好，当前选中卡设置z-index:99;下面的大div设置position:relative; top:-1;这样就能完美地解决这个问题了。
第二类：
关于这个小三角的位置，我们到底应该写在哪儿？
看结构，大家默认会写在下面的主体内容里，因为毕竟它是属于下面主体内容的，但是写在那儿将非常的难处理，不好不容易定位在上面导航的中间。那现在有一个好办法，把它写到上面的导航里的每一个li里，比如<i></i>再给小三角相对于li定位，这样一来，每点一下li，当前li都加一个active的类名，可以写为 li.active i{display:block;},这样这个问题就轻松搞定了。
是记得给i义样式哦
<ul>
<li>11111<i></i></li>
<li>11111<i></i></li>
<li>11111<i></i></li>
</ul>
<div class="main">我是主体内容</div>