Hiding Div Behind Its Parent

Hiding div behind its parent?

Yep, use z-index: http://jsfiddle.net/tGd4Q/

HTML:

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>​

CSS:

.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }​

This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:

$('.popup .close').hide();

Show Child Div within Hidden Parent Div

I don't think it's possible.

You can use JavaScript to pull the element out, or duplicate it and then show it.

In jQuery you could copy an element.

var element = jQuery('.Inner-Div').clone();

And then append to any visible element that might be appropriate.

element.appendTo('some element');

how can I hide parent div if all the children are display:none

Try like this using Jquery.

$(".abc").map(function(){
    let flag = true;
    $(this).find(".xyz").map(function(){
       if($(this).css("display") != "none"){
          flag = false;
       }
    });

    if(flag){
       $(this).css("display", "none");
    }else {
       $(this).css("display", "block");
    }
})

Is there a way to put a child element behind its parent using css?

If the parent has no z-index and the child has negative z-index it works. Check here:

jsfiddle.net/L29d2/

html

<div class="big">
    <div class="small"></div>
</div>

css

.big {
background-color:red;
width:400px;
height:400px;
}
.small {
float:left;
position:absolute;
background-color:blue;
width:200px;
height:200px;
margin-left:300px;
z-index:-1;
}

How to Hide Parent Div when the Child Div's display is none

You can just add:

if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();

This will check if there are any visible elements with the class tagParent and if there is none, then it will hide <div class="filterTags">

Demo

$(".tagCloser").click(function() {  $(this).parent(".tagParent").hide();  if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();});

.filterTags {  display: flex;  flex-wrap: wrap;  padding: 20px 25px 10px;  background: yellow;}
.tagParent {  padding: 0px 0px 0px 15px;  background: #e40046;  color: #fff;  font-family: Bold;  border-radius: 5px;  margin: 0px 10px 10px 0px;  display: flex;}
.tagContent {  align-self: center;}
.tagCloser {  padding: 7px 10px;  cursor: pointer;  align-self: center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filterTags">  <div class="tagParent">    <span class="tagContent">Urgent</span>    <span class="tagCloser">x</span>  </div>
  <div class="tagParent">    <span class="tagContent">Popular</span>    <span class="tagCloser">x</span>  </div></div>

div won't lay behind parent

Your statement of "obviously, I want the child div to sit behind the parent" is counter to the way html works (*sometimes). Obviously, the child element sits within the parent above the previous items within that parent, unless re-ordered by z-index, barring any -1 z-index tricks... or javascript manipulation... or... Okay, it's not that obvious. :)

I think that you will have future stacking and positioning problems if you actually force the child to sit behind the parent div like you want, and strongly suggest that you use a different dom structure. How about a head that contains hair and then a face. Then the face can contain eyes and ears and so forth and the positioning will all stack naturally in dom order?

.goals {  align-items: center;  background: #e3e3e3;  display: flex;  grid-row: 3/4;  height: 500px;  width: 100vw;}
.circle {  display: table-cell;  /*vertical-align: middle;*/  background: #3c759a;  border-radius: 100%;  height: 300px;  overflow: hidden;  position: relative;  width: 300px;}
.body {  background: #222;  border-radius: 35px;  height: 400px;  left: 75px;  position: relative;  top: 170px;  width: 150px;}
.head {  background: #ffe4be;  border-radius: 20px;  height: 100px;  left: 100px;  position: absolute;  top: 80px;  width: 100px;  z-index: 1;}
.hair-main {  background: #e7ab57;  border-radius: 34px 34px 0px 0px;  height: 70px;  left: 90px;  position: absolute;  top: 68px;  width: 120px;}

<div class="goals">  <div class='circle'>    <div class='body'></div>    <div class="hair-main"></div>    <div class='head'></div>  </div></div>

---

Related Topics