我有一个轮播菜单，当你将鼠标悬停在每个元素上时，我想创建一个描述框。问题是，当我把它的位置放在绝对位置时，它不会显示超出div的整个描述框。当我把位置放在绝对时，描述框向下滚动，当我向下滚动页面，我不知道该怎么办。有谁知道如何解决这个问题？
CSS
.carousel-component {
position:relative;
overflow:hidden; /* causes the clipping */
display:none; /* component turns it on when first item is rendered */
}
.carousel-component ul.carousel-list {
width:10000000px;
position:relative;
z-index:1;
}
.carousel-component .carousel-list li {
float:left;
list-style:none;
overflow:hidden;
}
.carousel-component .carousel-clip-region {
overflow:hidden; /* Secret to the clipping */
margin:0px auto;
position:relative;
}
/**
* ==============================================================================
* Safe to override. It is safe to override background, padding, margin, color,
* text alignment, fonts, etc. Define a separate CSS file and override your style
* preferences.
**/
.carousel-component {
/* padding:0px;*/
/* -moz-border-radius:6px;*/
/* color:#618cbe;*/
}
.carousel-component ul.carousel-list {
margin:0px;
padding:0px;
line-height:0px;
}
.carousel-component .carousel-list li {
text-align:center;
margin:0px;
padding:0px;
}
.carousel-component {
padding: 0px 16px; /*8px 16px 4px 16px;*/
margin:0px;
}
.carousel-component .carousel-list li {
margin:0px 10px;
width:78px; /* img width is 78 px + a.border-left (1) + a.border-right(1) + img.border-left (1) + img.border-right (1)*/
height:78px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}
.carousel-component .carousel-list li a {
display:block;
outline:none;
}
div.desc_box {
display: none;
border-radius:5px;
border: #000000;
position: absolute;
padding:0.5rem;
background: #000000;
color: white;
height:150px;
width: 450px;
margin-bottom: 25%;
overflow-x: visible;
-webkit-transform: translateY(1em);
transform: translateY(1em);
}
.carousel-component .carousel-list li img {
display:block;
}
.carousel-component .carousel-prev {
position:absolute;
top:20px;
z-index:3;
cursor:pointer;
left:5px;
}
.carousel-component .carousel-next {
position:absolute;
top:20px;
z-index:3;
cursor:pointer;
right:5px;
}
Html和Jquery