Why does background color disappear in html when I style sub-elements

Question

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 class="menu">
        <p style="position: absolute; top: 5%; left: 5.8%">Home</p>
    </div>
    <div class="big_menu">
        <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?

you element has 0 size because its content is position:absolute — Temani Afif, Aug 13 '22 at 19:38
Are you saying that my p-tag elements also have to be fixed? — SimplyDev, Aug 13 '22 at 19:40

logz11 · Accepted Answer · 2022-08-14T02:34:47.037

1

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?

edited Aug 14 '22 at 02:34

answered Aug 13 '22 at 19:08

logz11

128
1
6

Sorry, that still doesn't work. When I first look at the page, the content that was supposed to be hidden is not. Then when I hover over the closed menu div, nothing happens. – SimplyDev Aug 13 '22 at 19:13
So, to clarify, the only issue is that "Details" does not have a background color when it appears after hovering "Home"? Do I have that right? – logz11 Aug 13 '22 at 19:36
1

Almost: The div *containing* "Details" does not show a background color. – SimplyDev Aug 13 '22 at 20:09
1

Okie dokie, so yeah in that case Temani's answer was correct, but I can elaborate a bit. Elements positioned absolutely are removed from the flow of the document: https://stackoverflow.com/questions/13545947/position-absolute-and-parent-height Simply remove the absolute position from the second p element is enough to get the background to show, but I'm guessing there's a reason you positioned them absolutely? – logz11 Aug 13 '22 at 20:19
Well, I don't really have a reason to position them like that. I just thought you had to do that, otherwise it could lead to bugs. I also thought it was a default positioning type. Anyway, thank you! That solved my problem! If you want, edit your answer to that! – SimplyDev Aug 13 '22 at 22:52
After further progress to the page, this solution caused another problem. It seems that after omitting ```position: absolute;```, I cannot position my element using top, left, bottom, and right. I was expecting this, bit I simply didn't notice it in my above comment. I looked for alternatives, however they brought back the main problem (background color disappearing). Do you know of any thing I can do? – SimplyDev Aug 14 '22 at 01:27
Heyo! Alright, I've edited my original answer. Since the background disappearing was solved can you close this question, and then create another question and tag me in it, or chat me directly for additional help? The original question is technically answered, but I'm happy to help you through further issues you are facing! – logz11 Aug 14 '22 at 02:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247253/discussion-between-logz11-and-simplydev). – logz11 Aug 14 '22 at 02:45

Why does background color disappear in html when I style sub-elements

1 Answers1