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>