：hover与div、position失效问题今天学习position:relative部分时，遇到一个问题。想写的代

今天学习position:relative部分时，遇到一个问题。

想写的代码大致如下：

<style>
        div{
            width: 200px;
            height: 300px;
            border: red solid 10px;            
            position: relative;
            left: 100px;
            top: 300px;
            color: rgba(21, 43, 21, 0.342);
        }
        p:hover{
            color:green;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <p>
        test the relative effect
    </p>
</body>

但是这样是不显示的，就是直接看不到div。把position相关注释掉也没用。

不知道到底是因为hover导致的还是连接了position：relative

能有用的办法

想要实现，必须把两种效果分开写。这样刚开始div是在原始位置，鼠标移上去就会跑到下面的相对位置。

<style>
        div{
            width: 200px;
            height: 300px;
            border: red solid 10px;
            
        }
        div:hover{
            position: relative;
            left: 100px;
            top: 300px;
            color: rgba(21, 43, 21, 0.342);
        }
        p:hover{
            color:green;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <p>
        test the relative effect
    </p>
</body>

但感觉还是效果不太行。注释掉也没用哦。

思考原因

原因：

原始div是什么都没有的，所以看不见；
写到一起，浏览器加载的时候，就会这样进行：首先生成了一个什么都没有的div；但是代码的意思是只有当鼠标移上去的时候才会显示位移和变颜色；但是现在是什么都没有的状态，鼠标移不到一个不存在的对象上面去，就不会产生效果。所以怎么都看不见。
如果分开写，就是先生成了一个有宽高框的div，然后再实现hover。所以就可以了。