CODEWITHSUNDEEP
css
Mark Te
Mark Te

Reputation: 162

How to make parent div above child div without position absolute?

Im am trying to make my parent div be on top of its child div, basically I have 2 divs that is floated inside my parents div, the left side and right side div.

<div id="parent">
     <div class="leftbox">left</div>
     <div class="leftbox">right</div>
</div>

Both child divs have float:left and width:50% css. Parent div got:

#parent {
   overflow:hidden;
}
#parent:hover {
   background: red;
}

What I want to do here is to cover the whole parent div with the background when the hover state is on, but the thing is when I hover on the parent div, it doesnt affect the child div making the impression that it is on top of the parent div, so what I did is I added:

position:relative;

to the parents div, but it still doesnt work. Any idea how I can achieve this? thanks!

PS: I dont really want to hide the child div, basically I just want to have the parent div on top of the it. I made the code simple but it seems I confused some of you. Here is what I wanna do, make the child div below the parent so it can get covered by the parents div background, but as you can see on my js fiddle, the childs div is on top of the parents background:

http://jsfiddle.net/MarkTe/jq12pu3p/

Upvotes: 0

Views: 2122

Answers (2)

komodosp
komodosp

Reputation: 3618

"not really hide it, I just want the parent div to be on top of it"

The only reason I could think you might want this is if the parent div was partially transparent, so you could still see the children underneath... In which case you could put a third div which was the same height & width as the parent but position absolute... 

<div id="parent">
  <div class="leftbox">left</div>
  <div class="leftbox">right</div>
  <div class="cover"></div>
</div>

Then...

div.cover {
   position:absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   transition: all .3s;
}     

#parent:hover > div.cover, div.cover:hover {
  background-color: #000000;
}

#parent { position: relative; } /* As well as your own code */

Upvotes: 2

SW4
SW4

Reputation: 71160

You cant actually layer a parent above its children, but you can mimic the effect by toggling the visibility of the children when hovering the parent, thusly:

#parent {
  overflow: hidden;
}
#parent:hover {
  background: red;
}
#parent:hover > div{
  visibility:hidden;
}
<div id="parent">
  <div class="leftbox">left</div>
  <div class="leftbox">right</div>
</div>

Upvotes: 0

Related Questions