如何製作與其他元素重疊的彈出窗口？

假設我有一堆包含幾個元素的行。當用戶將鼠標懸停在某個元素上時，會在元素下方顯示一個彈出式信息。此外，彈出窗口不應該讓其他元素移動，它必須與其他元素重疊，但不會移動它們。如何製作與其他元素重疊的彈出窗口？

這是如何實現的？

.ball:hover { 
 
    border: 1px solid red; 
 
} 
 

 
.ball:hover .info { 
 
    display: block; 
 
} 
 

 
.info { 
 
    z-index: 1; 
 
    display: none; 
 
    word-wrap: break-word; 
 
    margin-top: 1.1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class='row'> 
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    </div> 
 
</div>

來源

2017-06-13 Alexander Shmatko

嘗試在'.ball'中添加'max-height：128px;'（球圖像高度）。那是你的意思？ –

確保使用位置屬性'絕對'或'固定'... – Daniel

喜歡這個？給你的球1px固體透明邊框和.info一個絕對的位置。

.ball{ 
 
    border:1px solid transparent; 
 
} 
 
.ball:hover { 
 
    border: 1px solid red; 
 
} 
 

 
.ball:hover .info { 
 
    display: block; 
 
} 
 

 
.info { 
 
    z-index: 1; 
 
    display: none; 
 
    word-wrap: break-word; 
 
    margin-top:1px; 
 
    padding-top: 1.1em; 
 
    position:absolute; 
 
    background-color:#fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class='row'> 
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    </div> 
 
    
 
    <div class='ball col-xs-4'> 
 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
 
    </div> 
 
</div>

來源

2017-06-13 15:10:26

是的，但除此之外，它應該有一個白色背景，以便底部球的一部分不可見。 –

我編輯它，並添加了白色的背景顏色。我還將邊距改爲了填充，然後添加了1px的邊距以說明紅色邊框。 –

是的，謝謝！ –

HTML

<div class='row'> 
    <div class='ball col-xs-4'> 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
    </div> 

    <div class='ball col-xs-4'> 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
    </div> 

    <div class='ball col-xs-4'> 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
    <div class='info'>This popup info should overlap the bottom element but not shift it.</div> 
    </div> 

    <div class='ball col-xs-4'> 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
    </div> 

    <div class='ball col-xs-4'> 
    <img src='http://www.iconsearch.ru/uploads/icons/developerkit/128x128/ballblue.png'> 
    </div> 
</div>

CSS

.ball:hover { 
    border: 1px solid red; 
} 

.ball:hover .info { 
    display: block; 
} 
.ball 
{ 
    position: relative; 
    border:1px solid transparent; 
} 
.info { 
    position: absolute; 
    z-index: 1; 
    display: none; 
    word-wrap: break-word; 
    margin-top: 1.1em; 
    bottom:0; 
    background-color: #fff; 

}

這裏是鏈接，參考 codepen link

來源

2017-06-13 15:12:51

如何製作與其他元素重疊的彈出窗口？

回答

相關問題