weixin_40583091
weixin_40583091
2018-07-14 10:06
采纳率: 38.5%
浏览 987

如果图片被设置成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条回答 默认 最新

  • jslang
    天际的海浪 2018-07-14 12:09
    已采纳

    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;
           }
    
    点赞 评论
  • weixin_40583091
    weixin_40583091 2018-07-14 10:07

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

    点赞 评论
  • jiaoquanshaao08
    jiaoquanshaao08 2018-07-14 10:31

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

    点赞 评论
  • qq_42221363
    X WL 2018-07-14 10:32

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

    点赞 评论
  • jslang
    天际的海浪 2018-07-14 10:38

    第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;
           }
    
    
    点赞 评论
  • jiaoquanshaao08
    jiaoquanshaao08 2018-07-14 10:39

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

    点赞 评论
  • qq_31197317
    qq_31197317 2018-07-14 15:13

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

    点赞 评论
  • jiaoquanshaao08
    jiaoquanshaao08 2018-07-15 00:38

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

    点赞 评论

相关推荐