Home > front end >  Why does background color disappear in html when I style sub-elements
Why does background color disappear in html when I style sub-elements

Time:08-15

I am trying to create an html page that has a section that appears when an element is hovered over. I did this by using :hover .myclass in my CSS. It was working fine until I tried positioning the elements.My div that needed to appear had a background color, but when I positioned the elements in the div, the background color disappeared! Here is my html file:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript, Social">
    <meta name="description" content="Web-app to find and befriend new people!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .menu {
        display: block;
        position: fixed;
        top:0%;
        left:0%;
        height: 100%;
        width: 3%;
        padding:0%;
        margin: 0%;
        background-color: greenyellow;

    }       
    
    .big_menu {
        display: none;
        position: fixed;
        left: 3%;
        top:0%;
        height: 100%;
        padding:0%;
        margin: 0%;
        background-color: greenyellow !important;
    }

    .big_menu:hover {
        display: block;
        position: fixed;
        left: 3%;
        top:0%;
        height: 100%;
        padding:0%;
        margin: 0%;
        background-color: greenyellow !important;
    }

    .menu:hover   .big_menu {
        display: block;
        position: fixed;
        left: 3%;
        top:0%;
        height: 100%;
        padding:0%;
        margin: 0%;
        background-color: greenyellow !important;

    }
    </style>
</head>

<body>
    <div >
        <p style="position: absolute; top: 5%; left: 5.8%">Home</p>
    </div>
    <div >
        <p style="position: absolute; top: 5%; left: 5.8%;">Details</p>
    </div>
</body>

</html>

Can someone please explain to me why this is happening and how to fix it?

CodePudding user response:

ETA the Correct Answer:

Temani's answer was correct, but I can elaborate a bit: elements positioned absolutely are removed from the flow of the document. Simply removing the absolute position from the second p element is enough to get the background to show

Position: absolute and parent height?

  • Related