我如何定位這個div相對？

我在一個div中包含了「Caption」按鈕，我試圖弄清楚如何將它放在相對於圖像的位置，就在它下面。所以當我改變圖像時，它也將自己定位在新圖像下。但是，我甚至無法將其定位到相對於圖像的位置。下面的代碼：

<?php 
    $username = $_GET['username']; 
    session_start(); 
    $_SESSION['username'] = $username; 

    //Database Information 
    $dbhost = ""; 
    $dbname = ""; 
    $dbuser = ""; 
    $dbpass = ""; 

    //Connect to database 
    mysql_connect ($dbhost, $dbuser, $dbpass)or die("Could not connect: ".mysql_error()); 
    mysql_select_db($dbname) or die(mysql_error()); 

    //Do the query 
    $query = mysql_query("SELECT * FROM images ORDER BY idnum DESC LIMIT 5"); 

    //Generate an array of all images 
    $images = array(); 
    while($image = mysql_fetch_array($query)) { 
    //this adds each image to the images array 
    $images[] = $image; 
    $image['filename'] = $firstimage; 
} 
?> 

<?php 

    // Beginning attempt at a caption script. 



?> 

<html> 
    <head> 
    <title>Home - Site in Development</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <script type="text/javascript"> 

    // Switches the url to view large image. 

    function switchImageUrl(url, width, height) { 
    var x = document.getElementById('caption_selection'); 
     x.style.display = 'none'; 

    document.getElementById('center_frame').style.backgroundImage = 'url' + '(' + url + ')'; 
     document.getElementById('center_frame').style.width = width; 
     document.getElementById('center_frame').style.height = height; 
    } 

    </script> 

    <script type="text/javascript"> 

    function selectionToggle() { 
     var x = document.getElementById('caption_selection'); 
     if(x.style.display == 'block') 
      x.style.display = 'none'; 
     else 
      x.style.display = 'block'; 
      x.style.width = '75px'; 
      x.style.height = '75px'; 
      x.style.top = '0px'; 
      x.style.left = '0px'; 
    } 

    </script> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script> 
     $(document).ready(function() { 
     $("#caption_selection").draggable({ 
     containment : "#center_frame" 
     }); 
     $("#caption_selection").resizable({ 
     containment : "#center_frame" 
     }); 
     }); 
     </script> 

    </head> 
    <body onLoad="CalculateAllImageWidthes()"> 
    <div id='account_links'> 
    <?php 
    if ($_SESSION['username']) { 
    echo "Welcome $username!"; 
    } else { ?> 
    <a href='login.php'>Login</a> | <a href='register.php'>Register</a> 
    <?php } ?> 
    </div> 

    <h1>Picture Captions</h1> 
    <br/> 
    <br/> 
    <div id="left_bar"> 
    Submit a picture <a href="upload.php">here</a>. 
    <hr/> 
    <h2>Top Images</h2> 
    <br/> 

    <div id="front_pg_images"> 
    <?php foreach($images as $image) { ?> 
    <a onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>', '<?php echo $image['height']; ?>')"><img src="<?php echo $image['filename'];?>" width="72px" height="58px" id="front_pg_thumbnail"/></a> 
    <?php echo $image['name']." - by ".$image['submitter']; ?> <br/> 
    <br/> 
    <?php } ?> 
    </div> 

    </div> 
    <div id="center_frame" style="width: <?php echo $image['width']; echo "px" ?>; height: <?php echo $image['height']; echo "px" ?>; background-image: url('<?php echo $image['filename'];?>')" > 
    <div id="caption_selection" style="display:none"> 

    </div> 
    </div> 
    <div id="toggle_select_container"> 
    <input type="button" id="toggle_select" onClick="selectionToggle()" value="Caption"/> 
    </div> 


    </body> 
</html>

來源

2011-11-04 Mark Lyons

只是一個建議，既然你的問題似乎也無關PHP或JavaScript，刪除它，只顯示什麼是有關您的問題。（理想情況下通過[jsFiddle]（http://www.jsfiddle.net）） –