I have a problem in today’s position: Relative section.

The code I want to write is roughly as follows:

<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>
Copy the code

But it doesn’t show, you just don’t see the div. Commenting out position doesn’t help either.

I do not know whether it is caused by hover or connected position: relative

Can be useful

To achieve this, you must write the two effects separately. So when you start the div in its original position, you move it up and it goes to the relative position below.

<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>
Copy the code

But it still doesn’t feel right. It doesn’t help to comment it out.

Think about why

The reason:

  1. The original div is invisible because it has nothing;
  2. When written together, the browser loads, this is what happens: first, a div with nothing is generated; But what the code says is that it only shows the shift and color change when the mouse moves up; But now is nothing state, the mouse can not move over a non-existent object, will not produce the effect. So you can’t see anything.
  3. If written separately, that is, Sir Into a width and height box div, and then hover implementation. So that’s it.