有麻煩定位的div層

Question

我想用這個來定位我的滑塊的頂部圖像：

CSS：

#orbitDemo { background: url(../../images/orbit/spinner.gif) no-repeat center center 
#3c3c3c; height: 300px; } 
#orbitDemo.orbit { height: auto; } 
#orbitDemo img, #orbitDemo div { display: none; } 
#orbitDemo.orbit img, #orbitDemo.orbit div { display: block;} 

@media handheld, only screen and (max-width: 767px) { 

dl.nice.tabs.mobile { margin-bottom: 0px; } 
.nice.tabs.mobile dd a { padding: 12px 20px; } 
div.foundation-header h1 { font-size: 32px; font-size: 3.2rem; } 
} 

#container 
{ 
margin-left: auto; 
margin-right: auto; 
width: 950px; 
padding: 5px 15px 20px 15px; 
border: 1px solid; 
border-top: 1px solid #CCC; 
border-left: 1px solid #CCC; 
border-right: 1px solid #BBB; 
border-bottom: 1px solid #BBB; 
border-radius: 4px; 
-moz-border-radius: 4px; 
box-shadow:inset 0 0 2px #ccc; 
background: #fff; 
margin-bottom: 15px; 
} 

#image 
{ 
position: absolute; 
display: none; 
z-index: 2000; // might need to be changed if you cant see it 
} 

HTML：

<div id="sliderbg"> 
    <div class="container"> 
     <div class="row">   
      <div id="orbitDemo"> 

     <div> 
     <a href="<?php echo $link1; ?>" > 
      <img src="<?php echo $slide1 ;?>" alt="Slider" /> 
     </a> 
     </div> 

     <div> 
     <a href="<?php echo $link2; ?>"> 
      <img src="<?php echo $slide2 ;?>" alt="Slider" /> 
     </a> 
     </div> 

     <div> 
     <a href="<?php echo $link3; ?>"> 
      <img src="<?php echo $slide3 ;?>" alt="Slider" /> 
     </a> 
     </div> 

     <div id="image"> 
      <img src="<?php echo $slide0 ;?>" (This is the image over the slider.) 
     </div> 


      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
jQuery(document).ready(function ($) { 
$(window).load(function() { 
$('#orbitDemo').orbit({ 
    animation: 'horizontal-push', 
    bullets: false, 
}); 
}); 
}); 

This works great。我沒有遇到任何問題，只是它將所需的圖像渲染爲最後的另一面。我是否以這種錯誤的方式去做？我怎樣才能讓它跳過這個圖像或重寫它，使它看起來不像另一張幻燈片？

Answer 1

我想出了答案。

我應該做的結束滑塊的div層並與我的形象在滑塊定義新的，外面的滑塊，然後告訴它基於滑塊這樣來抵消自身：

<div id="sliderbg"> 
    <div class="container"> 
     <div class="row">   
      <div id="orbitDemo"> 


     <a href="<?php echo $link1; ?>" > 
      <img src="<?php echo $slide1 ;?>" alt="Slider" /> 
     </a> 



     <a href="<?php echo $link2; ?>"> 
      <img src="<?php echo $slide2 ;?>" alt="Slider" /> 
     </a> 



     <a href="<?php echo $link3; ?>"> 
      <img src="<?php echo $slide3 ;?>" alt="Slider" /> 
     </a> 

    </div> 

     <div id="image"> 
      <img src="<?php echo $slide0 ;?>" 
     </div> 



     </div> 
    </div> 
</div> 


<script type="text/javascript"> 
jQuery(document).ready(function ($) { 

var ob = $('#orbitDemo').offset(); 
$('#image').css({ 'top': ob.top+56, 'left': ob.left+0 }).show(); 

$(window).load(function() { 
$('#orbitDemo').orbit({ 
    animation: 'horizontal-push', 
    bullets: true, 
}); 
}); 
}); 

Answer 2

我不確定我是否知道您的意思，但我認爲您可以添加位置：固定到您的圖片（用於檢查徽標），並將其定位爲頂部，底部，右側和左側。