jQuery图像旋转木马上的定位和div问题

Question

我对JavaScript的了解最多也不简单（我不是贸易代码），但我试图拼凑一个页面，使得两个div坐在上面一个jQuery图像轮播。 This page就是我正在谈论的例子，用这个屏幕抓图显示它应该如何以适当的格斗形式显示：jtroll.com/chd/web/properform.png（作为第一次海报，stackoverflow不会让我附上了不止一个正确的链接，对不起）。

我的第一个问题是试图找出如何做一些定位弄虚作假的，这样我可以在jQuery的旋转木马，#slideblock的顶部都扔在div #cta_imgbox_learnmore和#img_boxout。我做了一个愚蠢的附加包装div，名为box1_home，认为这将有助于这一努力（因为当我试图将这些div放在#slideblock内时，它将旋转木马中的图像循环搞乱了）。

我做了一些position:relative tomfoolery，只是意识到它是根据#cta_imgbox_learnmore的高度向下推动整个#slideblock页面。坏消息。所以当然，我认为给予#slideblock一个负的顶部边缘可能是一个体面的方法来解决这个问题。

虽然我加了第二个div #img_boxout，但一切都到了地狱。我试图流入该文本的文本被推到一边，我不得不在#slideblock的顶部添加更可笑的负边距。不酷。

所以我想我的问题是：什么是更好，更干净，更聪明的方法来做到这一点，这不会搞砸了jQuery旋转木马？

Answer 1

最好的方法是获取要用作参考的元素的位置。

假设#carrousel随着滑块元件和#block根据需要它上面（使用jQuery）元素：

var ob = $('#carrousel').offset(); 
$('#block').css({ 'top': ob.top, 'left': ob.left }).show(); 

这仅仅是一个例子。你可能不得不将这些值加以处理，才能获得想要的东西。请注意，你应该创建#block，但用CSS隐藏它，这样它就不会显示出它是“他的时间闪耀”。

编辑：工作例如：

CSS

#carrousel_text 
{ 
    position: absolute; 
    display: none; 
    z-index: 2000; // might need to be changed if you can't see it 
    top: 0; 
    left: 0; 
    width: 200px; // change to whatever you need 
    height: 100px; // change to whatever you need 
    background: red; // so that you can see what you're doing 
} 

JS

// the one you already have, do not creae another instance of jquery 
jQuery(document).ready(function() { 

// gets the top and left position of the #slideblock 
var ob = $('#slideblock').offset(); 
// adds the top and left position to the #carrousel_text and shows it where you want it 
// note that you'll have to sum or substract to ob.top and ob.left accordingly to what you visually need, e.g. untill it's in the right place. 
$('#carrousel_text').css({ 'top': ob.top+50, 'left': ob.left+50 }).show(); 

最后，您可以只需插入在标记你的#carrousel_text，任何你想要的（这是无关），并将其他div放入其中，如：

<div id="carrousel_text"> 
    <div id="cta_imgbox_learnmore"> 
    <a id="cta_img_learnmore" href="#" title="Learn More"><span>Learn More</span></a> 
    </div>  
    <div id="img_boxout"> 
    <p>Read our story and our methodology in crafting your custom home</p> 
    </div> 
</div>