<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
height:700px;
width: 1480px;
margin:0 auto;
padding: 10px;
border: 4px solid gray;
/* z-index:-1;*/
position: relative;
/*background-image: url("picture/bg.jpg")*/
}
h1{
text-align: center;
color:rgb(56, 53, 53);
}
li{
list-style: none;
}
img{
width: 300px;
height:300px;
margin-top: 10px;
margin-left:50px;
border:5px solid grey
}
.img2{
display: none;
}
li{
list-style-type: none;
float: left;
a:hover .img2{
display: block;
width: 340px;
height:340px;
position: relative;
z-index: 2;
top:-10px;
left:-10px;
}
</style>
</head>
<body><h1>太阳系各个星球</h1>
<div>
<ul>
<li><a><img src="picture/地球.jpg.jpg"><img src="picture/地球.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/土星.jpg.jpg"><img src="picture/土星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/天王星.jpg.jpg"><img src="picture/天王星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/木星.jpg.jpg"><img src="picture/木星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/海王星.jpg.jpg"><img src="picture/海王星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/火星.jpg.jpg"><img src="picture/火星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/金星.jpg.jpg"><img src="picture/金星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/水星.jpg"><img src="picture/水星.jpg" class="img2"></a></li>
</ul>
悬浮上一行的下一行的往下挤,但是第2行却正确将图片悬浮出来,所以为什呢?怎样改动?就把悬浮的图片设置成相对定位图片你们自己随便找一个吧,解决立即采纳
position: relative;只是让你可以相对的调整元素显示的位置，却不能改变元素原本在文档流中所占用的空间。
想要元素脱离文档流应该用position: absolute;
或者也可以用margin将元素在文档流中所占用的空间调整为0，如：
a:hover .img2 {
display: block;
width: 340px;
height:340px;
position: relative;
margin: 0 -350px -350px 0;
z-index: 2;
top: -10px;
left: 30px;
}
最好你们测试一下,就知道是什么吗错误了,图片你们随便找一个就行
浮动使得父级容器的高度丢失，把行内和块状的表现形态转换为行内块(即 把 display:inline; 和 display:block; 转换为 display：inline-block;);
所以第二行图片展示在了第一行图片的右侧。 但并不知你想达到什么样的效果？
不明白你想做到什么效果，但是我建议你把a:hover中的改成position：absolute
第2行也会往下挤,只是你下面没内容 ，看不出来
li {
list-style-type: none;
float: left;
position: relative;
}
a:hover .img2 {
display: block;
width: 340px;
height:340px;
position: absolute;
z-index: 2;
top:-10px;
left:-10px;
}
li :{ position: relative;}
a:{position: absolute;}
问题描述不清楚啊，图片一般不设置为relative绝对定位。除非你只是想让这个图片偏移。
如你所理解子元素设置 relative 同样适用 top 和 left 等属性，但 子元素设置为 relative 会让非行内表现形态的父级元素大小产生变化；即页面中鼠标
悬停后a元素无变化，li 元素大小发生变化。第一行的li元素大小发生变化所以第二行li的位置会发生变动。 你可以把隐藏img2的大小调整的比兄弟元素img小，悬停后第二个li位置就不会移动了。 当然设置成 absolute 更适用性会更强，效率也会更佳，不会引起下面元素的重排和重绘。