Question

我对Javascript的了解至多是最基本的（我不是通过交易编码器），但我正在尝试将页面拼凑在一起，以便有两个div坐在jQuery图像轮播上。 This page就是我正在谈论的例子，这个屏幕显示它应该以正确的战斗形式呈现：jtroll.com/chd/web/properform.png（作为首次发布的海报，stackoverflow不会让我附上一个以上的正确链接。抱歉）。

我的第一个问题是试图找出如何进行某种定位技巧，这样我就可以将div #cta_imgbox_learnmore和#img_boxout放在jQuery轮播上，#slideblock 。我做了一个愚蠢的附加包装div，称为box1_home，认为这会有助于这种努力（因为当我试图将这些div放在#slideblock中时，它会在旋转木马中搞砸了图像循环）。

我做了一些position:relative tomfoolery，只是意识到它正在根据#slideblock的高度将整个#cta_imgbox_learnmore推向页面。坏消息。所以当然，我认为给#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>

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

1 个答案: