CODEWITHSUNDEEP
htmlcssweb
M.U
M.U

Reputation: 401

CSS display parent element's background-color on top of that of the child?

The following code displays the parent text on top of the child element but not the background color :

*{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    perspective:1000px;
    -webkit-perspective:1000px;
}
.maindiv{
    color:black;
    width:80%;
    height:50px;
    margin:10px;
    flex-wrap:nowrap;
    position:absolute;
    z-index: 10;

}

.maindiv .facebook{
    background-color:red;
    display:block;
    position:relative;
}
.facebook:before{
    display:block;
    background-color:black;
    color:white;
    content:"Hover"; 
}
a{
    z-index:-999; 
    display:block;
    background-color:burlywood;
    text-decoration:none;
    color:black;
    font-size:larger;
    font-family:cursive;
    position:relative;
    height:33px;
    top:-40px; 
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="codecss.css" />
</head>
<body>
    <div class="maindiv">
        <div class="facebook">Facebook
            <a href="http://www.facebook.com">Facebook</a>
        </div>
    </div>
</body>
</html>

, I've seen many answers here relating to this problem but none of them work and almost all of them are asking about background image I don't know if it makes any difference "

Upvotes: 2

Views: 1357

Answers (2)

M.Melih
M.Melih

Reputation: 36

I got a result but don't know if it is the result you want , but it may help

  *{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        perspective:1000px;
        -webkit-perspective:1000px;
    }
    .maindiv{
        color:black;
        width:80%;
        height:50px;
        margin:10px;
        flex-wrap:nowrap;
        position:absolute;
        z-index: 10;

    }

    .maindiv .facebook{
        background-color:red;
        display:block;
        position:relative;
    }
    .facebook:before{
        display:block;
        background-color:black;
        color:white;
        content:"Hover"; 
      position:relative;
      top:15px;
    }
    a{
        z-index:-999; 
        display:block;
        background-color:burlywood;
        text-decoration:none;
        color:black;
        font-size:larger;
        font-family:cursive;
        position:relative;
        height:33px;
        top:-10px; 
    }
  
   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <link rel="stylesheet" href="codecss.css" />
    </head>
    <body>
        <div class="maindiv">
            <div class="facebook">Facebook
                <a href="http://www.facebook.com">Facebook</a>
            </div>
        </div>
    </body>
    </html>

Upvotes: 1

user5125729
user5125729

Reputation:

is this what you are looking for or do you want the black under the red? Just remove the 

top:-40px;

like this

a{
z-index:-999; 
display:block;
background-color:burlywood;
text-decoration:none;
color:black;
font-size:larger;
font-family:cursive;
position:relative;
height:33px;

}

Upvotes: 1

Related Questions