WEB网址：http://riiul.xyz/kalista.html
我试图制作一个lil博客页面，我有问题有悬停，如果你将鼠标移到网页上的图标上，它弹出一个文本框，但文本框向下移动另一个div“Soovitatavad ruunid“
我真的很喜欢这些东西，但我自己认为这可能是有利润的。我可以使用position：absolute来工作，但是如果有更多的div并且内容变得更长，那么滚动就会占据这些位置：绝对的东西。
这是我的代码：
.bgimg {
background-image: url("../img/kalista.jpg");
background-repeat: no-repeat;
overflow: scroll;
height: 100vh;
background-size: auto;
z-index: -999;
}
.box {
background-image: url('../img/kalistatop.png');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: auto;
border: solid 3px #CCCCCC;
vertical-align: top;
background-color: rgba(0, 56, 78, 0.7);
padding: 4px;
margin: auto;
margin-top: 200px;
width: 60%;
z-index: -998;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.pealkiri {
margin-top: 100px;
margin-bottom: 100px;
z-index: -997;
text-align: center;
}
.summonerid-pealkiri {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
z-index: -996;
}
.summonerid {
margin-top: 0px;
margin-bottom: 0px;
display: inline-block;
z-index: -995;
}
.summoner-wrap {
width: 64px;
}
.summoner-wrap .summoner-content {
display: none;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #262626;
padding: .5em;
margin-left: 5px;
margin-right: 5px;
border: 3px solid #0d0d0d;
width: 275px;
z-index: -994;
}
.summoner-wrap:hover .summoner-content {
display: block;
}
.runed-pealkiri {
margin-left: 50px;
z-index: -993;
}
.runed {
z-index: -992;<?php $url='http://vignette1.wikia.nocookie.net/leagueoflegends/images/1/18/Kalista_OriginalSkin.jpg/revision/latest?cb=20141105014341' ; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Myrka</title>
<meta charset="utf-8">
<meta name="author" content="pixelhint.com">
<meta name="description" content="Myrka Weeb" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="icon" href="favicon.png" type="image/x-icon" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Styles -->
</head>
<body>
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png" title="Myrka" alt="Myrka" />
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<li><a href="index.html" class="selected">Kodu</a>
</li>
<li><a href="minust.html">Minust</a>
</li>
<li><a href="tiim.html">Tiim</a>
</li>
<li><a href="paevik.html">Päevik</a>
</li>
<!--<li><a href="contact.html">Kontakt</a></li>-->
</ul>
</nav>
<!-- end navigation menu -->
<div class="footer clearfix">
<ul class="social clearfix">
<li>
<a href="http://www.facebook.com/kvcmyrka" class="fb" data-title="Facebook"></a>
</li>
<!--<li><a href="#" class="google" data-title="Google +"></a></li>
<li><a href="#" class="behance" data-title="Behance"></a></li>
<li><a href="#" class="twitter" data-title="Twitter"></a></li>
<li><a href="#" class="dribble" data-title="Dribble"></a></li>
<li><a href="#" class="rss" data-title="RSS"></a></li>-->
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © 2016 Myrka Weeb.</p>
<p>myrka@riiul.xyz</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</header>
<!-- end header -->
<!-- Õpetus -->
<section class="main clearfix">
<div class="bgimg" style="font-family: raleway-regular, arial">
<div class="box">
<div class="pealkiri">
<h1 style="color:#ffffff;">Kalista - Hüplev kits</h1>
</div>
<div class="summonerid-pealkiri">
<h2 style="color: #ffffff;">Soovitatavad summonerid</h2>
<div class="summonerid">
<div class="summoner-wrap" style="float:left; padding-right:5px;">
<img src="/img/heal.png" alt="Hiil" width="64" height="64" style="border:2px solid black" />
<div class="summoner-content">
<h3 style="color: #fff;">Hiil</p>
<p style="color: #fff; font-size:12px;">Level: <span style="color: #1aff1a">1</span> Raadius: <span style="color: #1aff1a">850</span> Cooldown: <span style="color: #1aff1a">240</span></p>
<p style="color: #fff; font-size:12px;">Heals the caster and the allied champion nearest to the caster's cursor (or the most wounded ally if no target is near the cursor) by 90-345 health, and gives affected champions +30% movement speed for 1 seconds. Heal is 50% less effective on allies previously healed with another Summoner Spell Heal within the past 35 seconds. 240 second cooldown.</p>
</div>
</div>
<div class="summoner-wrap" style="float:right; padding-left:5px;">
<img src="/img/flash.png" alt="Fläsh" width="64" height="64" style="border:2px solid black" />
<div class="summoner-content">
<h3 style="color: #fff;">Fläsh</p>
<p style="color: #fff; font-size:12px;">Level: <span style="color: #1aff1a">8</span> Raadius: <span style="color: #1aff1a">425</span> Cooldown: <span style="color: #1aff1a">300</span></p>
<p style="color: #fff; font-size:12px;">Teleports your champion toward your cursor's location. 300 second cooldown.</p>
</div>
</div>
</div>
</div>
<div class="runed-pealkiri">
<h2 style="color: #ffffff;">Soovitatavad ruunid</h2>
<div class="runed">
</div>
</div>
</div>
</div>
</section>
<!-- end main -->
</body>
</html>
答案 0 :(得分：0)
一个简单的解决方法是使用：
.summoner-wrap .summoner-content {
visibility: hidden; /* Change here */
bottom: 5%;
left: 5%;
right: 5%;
background-color: #262626;
padding: .5em;
margin-left: 5px;
margin-right: 5px;
border: 3px solid #0d0d0d;
width: 275px;
z-index: -994;
}
.summoner-wrap:hover .summoner-content {
visibility: visible; /* Change here */
}