如果图片被设置成display:none,那定位postion:relative是怎样定位的呢?

<!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行却正确将图片悬浮出来,所以为什呢?怎样改动?就把悬浮的图片设置成相对定位图片你们自己随便找一个吧,解决立即采纳

8个回答

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;
       }

最好你们测试一下,就知道是什么吗错误了,图片你们随便找一个就行

第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;
       }

jslang
天际的海浪 回复weixin_40583091: a:hover时设置display: block让图片显示,既然显示了必然会产生他的位置。 图片相对定位position: relative;只是让你可以用left与top相对的调整元素显示的位置,却不能让元素脱离文档流,元素还是会在文档流中占用它原本的位置和空间。 当图片显示时,文档流中就会多出图片应该占用的空间,这样它所占用空间的原本的内容当然会被挤到别处。 可以用margin将元素在文档流中所占用的空间调整为0。就不会挤到别的内容了
一年多之前 回复
qq_42697081
qq_42697081 可能的值:absolute,fixed,relative,static,static,inherit。 值 描述 absolute 生成绝对定位的元素
一年多之前 回复
qq_42697081
qq_42697081 可能的值:absolute,fixed,relative,static,static,inherit。 值 描述 absolute 生成绝对定位的元素
一年多之前 回复
weixin_40583091
weixin_40583091 那我这样写,就是改不对了吗?我知道你们什么意思,父元素设置定位,然后子元素absolute以父元素定位.现在我就是不明白我为什么会出错,理论上,子元素设置relative,,也会完成效果,只不过相对于自己原来的位置,但是img2原先设置为display:none,那么他的位置在哪,浏览器没有渲染它,也会产生位置吗,还是说,a:hover悬浮时才产生位置,如果在这时产生他的位置,他是块状的,理论上,在li元素内有连个兄弟元素,一个在上一个在下,下面是那个块状元素,那么根据relative就可以把它往上调动,而不印象下面的元素排序.但是调试不出来,那么怎样调呢
一年多之前 回复
jslang
天际的海浪 回复weixin_40583091: 你在ul下面加一行文字就会看出第二行也不正常了
一年多之前 回复
weixin_40583091
weixin_40583091 你试试就知道什么错误了,鼠标在第2行,悬浮变大图正常,但是第1行就是不行
一年多之前 回复
weixin_40583091
weixin_40583091 但是img2设置相对定位也是可以的吧,悬浮的时候图片在li元素内成块级元素在设置top:-x;只要设置妥当,不会影响下一行的,但是为什么设置不出来,当鼠标停在第一行,第2行的排列顺序便会打乱
一年多之前 回复
qq_40128205
qq_40128205 ..........................
一年多之前 回复
jslang
天际的海浪 就是说,要让一个子元素在父元素内悬浮,父元素要用position: relative; 子元素要用position: absolute; 这样才不会影响其它元素
一年多之前 回复

浮动使得父级容器的高度丢失,把行内和块状的表现形态转换为行内块(即 把 display:inline; 和 display:block; 转换为 display:inline-block;);
所以第二行图片展示在了第一行图片的右侧。 但并不知你想达到什么样的效果?

不明白你想做到什么效果,但是我建议你把a:hover中的改成position:absolute

li :{ position: relative;}
a:{position: absolute;}

问题描述不清楚啊,图片一般不设置为relative绝对定位。除非你只是想让这个图片偏移。

如你所理解子元素设置 relative 同样适用 top 和 left 等属性,但 子元素设置为 relative 会让非行内表现形态的父级元素大小产生变化;即页面中鼠标
悬停后a元素无变化,li 元素大小发生变化。第一行的li元素大小发生变化所以第二行li的位置会发生变动。 你可以把隐藏img2的大小调整的比兄弟元素img小,悬停后第二个li位置就不会移动了。 当然设置成 absolute 更适用性会更强,效率也会更佳,不会引起下面元素的重排和重绘。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!