0
私はこのコードを使用して画像にカーソルを合わせると、なぜ私のCSS/HTML画像ホバーポップアップのテキストが常にliタグ全体の下に並んでいるのか理解できません。私はすべてのCSSの属性を見て、それぞれの属性が何であるかを書き留めましたが、どれもテキストを最後まで持っているという私の問題を変えていませんでした。なぜこのようなことが起こりますか、それをどのようにして上になるように垂直に整列させるのですか？例えばHTMLポップアップのテキストが下に縦に整列する原因は何ですか？
私がイメージと私はそれが何をしたいにカーソルを合わせると、ここでのコードのスクリーンショットは、アクションに以下の通りです： 
私は、コードはそれが何をした理由についてだけで混乱しています。事前に
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>StackoverFlow Question</title>
</head>
<style type="text/css">
li {display: inline-block; /*Removes Bullet Points*/}
ul.columns {width: 1350px;}
ul.columns li {
width: 120px; /*Space between thumbnails*/
float: left;
margin: 50px; padding: 0; /*Space between thumbnails*/
position: relative;
}
ul.columns li:hover {z-index: 99;} /*Place popup over other content on page*/
ul.columns li img {
position: relative;
opacity: 1;
}
ul.columns li:hover img{
opacity: 0.5;
}
ul.columns li .info {
position: absolute;
left: 179px; top: 0px; /*Location of Popup*/
padding: 200px 10px 0px; /*Side lengths of Popup (200px is height)*/
width: 250px; /*Width of Popup*/
display: none; /*Hide when not hovering*/
background: white;/*Color & Opacity of Popup*/
border: 1px solid black;
}
ul.columns li:hover .info {display: block;} /*Show popup when hovering*/
</style>
<body>
<h1>Simplified Sample</h1>
<ul class="columns">
<li>
<a href="Teams of Teams, Hierarchy of Teams, and Hierarchy Essay.html"><img class="thumbnails" src="Cover.jpg" alt="" height="250"/></a>
<div class="info">
<h2>Post 1</h2>
<p>Nostrud nostrud quidns. Feugiat valetudo praemitto molior abdo. </p>
</div>
</li>
<li>
<a href="The Raven by Edgar Allen Poe Analysis Essay.html"><img class="thumbnails" src="The Raven Cover Image.jpg" alt="" height="250" /></a>
<div class="info">
<h2>Post 2</h2>
<p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
</div>
</li>
<li>
<a href="SecretPlants.html"><img class="thumbnails" src="file:///E:/Grace/Art/Animation-Computing/Website/ContentTABS/ResourceFiles/Literature/TheSecretsHeldInPlants/SecretLifeofPlantsCover.jpg" alt="" height="250" /></a>
<div class="info">
<h2>Post 3</h2>
<p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
</div>
</li>
<li>
</ul>
</body>
</html>
ありがとう：
は、ここでは、コードです！
グレース