在我的 html 页面中，我有一个工具提示内容（仅由 css 元素构建，没有 javascript）。我打算在工具提示内容中插入一个可在单击时向上滚动的手风琴内容（也仅由 css 构建）。
这是我的 CSS 和 HTML 代码示例：
<html>
<head>
<!-- SOURCE accordion CSS jsfiddle.net/m_raffaele/E4acF/ -->
<!-- SOURCE tooltip CSS http://inserthtml.com/demo/pop-in-dialogue/ -->
<style>
.id-content {
width: 608px; height: 854px;
margin:0 auto;
background:yellow;
}
/* TOOLTIP Bawah */
.container-2b {
width:608px; height:854px;
position: relative;
float:right;
z-index:15;
margin: 0 auto;
}
.container-2b input {
display: none;
}
.container-2b input:checked + .popbox-2b {
opacity: 0.9;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
font-variant: normal;
padding:10px 5px 5px 5px;
}
/* ICON klik url(../../images/idsirtii/b4tap.jpg); background-size:99px 130px;*/
.container-2b label {
width:99px; height:130px;
position: relative;
float:right; margin-top:-182px;
background-color:green;
}
.container-2b label:checked + {
width:99px; height:130px;
position: relative;
float:right;
background-color:red;
}
/*buat kotak tooltip POP UP yg muncul*/
.popbox-2b {
width:598px; height: 830px; background: grey;
border: 1px solid transparent; opacity: 0;
position: relative;
margin-top:-182px;
z-index: 10;
color:white;
font-size:12px; font-family: "scada-regular"; color:white;
text-align:center; line-height:1.5em;
box-shadow-opacity;0.5;
/*gradien warna
box-shadow: inset 0px 40px 60px -30px rgba(200,200,255,1), 0px 0px 20px rgba(0,0,0,0.1);
/* border-radius: 7px; efek ujung tumpul */
-moz-perspective: 1000;
-ms-perspective: 1000;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transition: all fade;
-moz-transition: all fade;
-ms-transition: all fade;
}
/*****************************************
ACCORDION TAB
******************************************/
/*
*
* Author: Michael Raffaele <michael@mraffaele.com>
* Date: 25th October 2011
* Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
*
*/
/* Shared for all accordion types margin-top:-500px; */
.accordion {
width:550px;
font-family:"strait"; font-size:14px;
margin:0 auto;
background:#fcf;
position:absolute;
bottom: 0px;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
position:relative; bottom:0;
background:blue; display:block;
cursor:pointer;
font-size:16px; color:white; line-height:16px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
text-transform:uppercase;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:red;
color:#FFF;
}
.accordion .content-acc {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:red;
margin:0 0 10px;
}
.accordion h3 {
color:blue;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li label:hover {
/* border:1px solid #542437; We don't want the border to disappear on hover */
}
.vertical ul li .content-acc {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content-acc, .vertical [type=checkbox]:checked ~ label ~ .content-acc {
height:300px;
/*border:1px solid #542437; */
}
</style>
</head>
<body>
<div class="id-content">
<!--TOOLTIP-->
<div class="container-2b">
<label for="activate-2b" class="container-2b"></label>
<input type="checkbox" name="activate-2b" id="activate-2b" />
<div class="popbox-2b"></div>
</div>
<!--div TOOLTIP-->
<!--ACCORDION-->
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">This is an example accordion item</label>
<div class="content-acc">
<br/ >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem
luctus porttitor vestibulum, eros sapien mattis libero, euismod congue
neque nisi at ipsum. Mauris semper ipsum sit amet metus semper
malesuada. Donec vel est justo, ac porta diam.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
但是，当我将“手风琴垂直”div 放在工具提示“pop-box2b”内时，手风琴似乎无处不在，而不是在工具提示“pop-box2b”区域内，我找不到它的位置。
这两个内容（工具提示和手风琴）都使用复选框。
可能是因为我在同一页面中使用了 2 个复选框吗？
如果我错误地放置/修改了手风琴内容，有人可以帮我找出代码中是否有问题吗？
如果我把它放在工具提示弹出框区域内，为什么手风琴不会出现？