jQuery 图像轮播上的定位和 div 问题

Question

我对 Javascript 的了解充其量只是初级的（我不是一名编码员），但我正在尝试将一个页面拼凑在一起，以便在 jQuery 图像轮播顶部放置两个 div。 此页面是我正在谈论的内容的示例，此屏幕截图显示了如何它应该看起来是正确的战斗形式：jtroll.com/chd/web/properform.png（作为第一次发帖者，stackoverflow 不允许我附加多个正确的链接。抱歉）。

我的第一个问题是试图弄清楚如何进行某种定位技巧，以便我可以将 div #cta_imgbox_learnmore 和 #img_boxout 放在 jQuery 轮播顶部， #slideblock。我制作了一个愚蠢的附加包装 div，名为 box1_home，认为这会有助于实现这一目标（因为当我尝试将这些 div 放入 #slideblock 中时，它搞砸了轮播中的图像循环）。

我做了一些position:relative蠢事，结果发现它根据#cta_imgbox_learnmore的高度将整个#slideblock推到页面下方。坏消息。当然，我认为给 #slideblock 一个负的上边距可能是解决这个问题的一个不错的方法。

然而，一旦我添加了第二个 div #img_boxout，一切就都完蛋了。我试图流入该 div 的文本被推到了一边，我不得不在 #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>