重疊元素錯誤

Question

我有充滿MySQL數據的框。當鼠標懸停在盒子上方時，它會變大，但下面一行中的盒子會在頁面上移動。我很確定這是由於重疊的元素，但我不知道如何解決這個問題，因爲它們在技術上都是一個元素。

CSS

.boxed { 
    border: 5px solid blue; 
    margin-left:30px; 
    margin-top:10px; 
    height: 120px; 
    width: 200px; 
    border-style: double; 
    text-overflow: ellipsis; 
    float:left; 
} 
.boxed:hover{ 
    height: 150px; 
    width: 250px; 
    -moz-box-shadow: 0 0 10px #ccc; 
    -webkit-box-shadow: 0 0 20px #ccc; 
    box-shadow: 0 0 20px #888888; 
    border-style: double; 
    text-overflow: ellipsis; 
} 

PHP

<?php 
    $dbhost = 'localhost'; 
    $dbuser = 'root'; 
    $dbpass = ''; 
    $selection = "ORDER BY id ASC"; 

    $conn = mysql_connect($dbhost, $dbuser, $dbpass); 
    if(!$conn) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    $selection = isset($_GET['sort']) ? $_GET['sort'] : ""; 
    if ($selection == "1") { 
     $selection = "ORDER BY id DESC"; 
    } else if ($selection == "2") { 
     $selection = "ORDER BY id ASC"; 
    } 

    $sql = "SELECT id, threadName, message FROM threads "; 
    $sql .= $selection; 

    mysql_select_db('threads'); 
    $retval = mysql_query($sql, $conn); 

    if(!$retval) { 
     die('Could not get data: ' . mysql_error()); 
    } 

    while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) { 
     $id = $row['id']; 
     $threadName = $row['threadName']; 
     $message = $row['message']; 
     echo "<div class='boxed'><center>".$threadName."<br>".$message."</center></div>"; 
    } 
?> 

Answer 1

給你不想推周圍絕對定位等內容的複選框，然後空間餘量，因此絕對定位的盒子似乎是周圍塊與他們流動：

.boxed { 
 
    border: 5px solid blue; 
 
    margin-left: 30px; 
 
    margin-top: 10px; 
 
    height: 120px; 
 
    width: 200px; 
 
    border-style: double; 
 
    text-overflow: ellipsis; 
 
    float: left; 
 
    position: absolute; 
 
    top: 0; 
 
    background: white; 
 
} 
 

 
.boxed:hover { 
 
    height: 150px; 
 
    width: 250px; 
 
    -moz-box-shadow: 0 0 10px #ccc; 
 
    -webkit-box-shadow: 0 0 20px #ccc; 
 
    box-shadow: 0 0 20px #888888; 
 
    border-style: double; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.below { 
 
    margin-top: 12px; 
 
} 
 

 
.side { 
 
    margin-left: 246px; 
 
    border: .125em solid; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: white; 
 
    padding:10px; 
 
}

<div class="boxed"></div> 
 
<div class="side"> 
 
    this box isn't getting bumped 
 
</div> 
 
<div class="below"> 
 
    this text isn't getting bumped 
 
</div>

UPDATE：

對於重複的代碼（即從PHP的foreach循環中）間隔塊可以用來將盒裝塊間隔開，並且在懸停時，jQuery將「懸停」類添加到適當的間隔塊，這給它一個樣式規則z-index:3（和position:relative來激活z -index規則）：

$('.boxed').mouseover(function() { 
 
    $('.spacer').removeClass('hover'); 
 
    $(this).closest('.spacer').addClass('hover'); 
 
});

.spacer { 
 
    width: 210px; 
 
    height: 130px; 
 
\t display:inline-block; 
 
} 
 

 
.spacer.hover { 
 
    position: relative; 
 
    z-index: 3; 
 
} 
 

 
.boxed { 
 
    border: 5px solid blue; 
 
    height: 120px; 
 
    width: 200px; 
 
    border-style: double; 
 
    text-overflow: ellipsis; 
 
    float: left; 
 
    top: 0; 
 
    background: white; 
 
} 
 

 
.boxed:hover { 
 
    height: 150px; 
 
    width: 250px; 
 
    -moz-box-shadow: 0 0 10px #ccc; 
 
    -webkit-box-shadow: 0 0 20px #ccc; 
 
    box-shadow: 0 0 20px #888888; 
 
    border-style: double; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.below { 
 
    margin-top: 12px; 
 
} 
 

 
.side { 
 
    margin-left: 246px; 
 
    border: .125em solid; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: white; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="spacer"> 
 
    <div class="boxed"></div> 
 
</div><div class="spacer"> 
 
    <div class="boxed"></div> 
 
</div>