创建一个悬停描述框，在carousel div外触发效果

Question

我有一个旋转菜单，我想创建一个描述框，当你悬停在每个元素。问题是，当我把它的位置绝对它不显示整个描述框，去外面的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和Jqueryhttps://gist.github.com/teaxhillari/71f68a15c8820715e367

Answer 1

如果你需要在你的页面上显示你的弹出框在一个特定的，相对于浏览器窗口的非滚动位置，那么你可以使用position: fixed代替position: absolute。固定位置定位它相对于浏览器窗口，所以它不会移动滚动。但是，如果你确实需要将它相对于父元素定位，那么这将不起作用，因为父元素实际上变成了浏览器的窗口。