1. CSS中隐藏元素的几种方法
在前端开发中，有时我们需要隐藏一个元素，但同时又需要显示该元素的子元素，这在一些特定的设计中非常常见。
1.1 display:none
display:none是一种常用的隐藏元素的方法。它会将元素直接隐藏掉，并且不会占据任何空间，因此也不会影响其他元素的布局。
.parent {
display: none;
}
这样，.parent元素以及它包含的所有子元素都将被隐藏。
1.2 visibility:hidden
visibility:hidden也是一种隐藏元素的方法。它会将元素隐藏，但是它会占据空间。这样做的好处是，如果隐藏的元素之后恢复显示，它会持续占据原来的位置，而不会发生位置变化。
.parent {
visibility: hidden;
}
这样，.parent元素将被隐藏，但是它仍将占据原来的空间。
1.3 opacity: 0
opacity:0也是一种隐藏元素的方法。它会将元素透明度设置为0，从而隐藏该元素。与display:none不同，opacity:0会占据空间，并且不会影响其他元素的布局。
.parent {
opacity: 0;
}
这样，.parent元素将被隐藏，并且仍将占据原来的空间。
2. 隐藏父元素显示子元素的方法
现在，我们来看看如何实现隐藏父元素显示子元素的效果。
2.1 使用position和z-index
我们可以使用CSS的position和z-index属性来控制元素的叠放顺序，从而达到隐藏父元素显示子元素的效果。
我们先给所有元素设置一个默认的position属性，可以是static、relative、absolute或fixed。
.parent, .child {
position: relative;
}
然后，我们将子元素的z-index属性设置为比父元素高，这样子元素就会显示在父元素之上了。
.parent {
z-index: 1;
}
.child {
z-index: 2;
}
最终的效果如下图所示：
2.2 使用负margin
我们还可以使用CSS的margin属性来隐藏父元素，并显示子元素。
首先，我们可以给父元素设置一个负的margin，以将其向左上角移动，从而将其隐藏起来。
.parent {
position: relative;
margin-top: -30px;
margin-left: -30px;
}
然后，我们可以将子元素的margin设置为正的，以将其移回到原来的位置。
.child {
margin-top: 30px;
margin-left: 30px;
}
最终的效果如下图所示：
2.3 使用transform
我们还可以使用CSS的transform属性来隐藏父元素，并显示子元素。
首先，我们可以给父元素设置一个transform属性，将其向左上角移动，从而将其隐藏起来。
.parent {
transform: translate(-30px, -30px);
}
然后，我们可以将子元素的transform属性设置为相反的值，以将其移回到原来的位置。
.child {
transform: translate(30px, 30px);
}
最终的效果如下图所示：
3. 总结
CSS中隐藏元素的方法有很多种，常用的有display:none、visibility:hidden和opacity:0。要实现隐藏父元素并显示子元素的效果，我们可以使用CSS的position和z-index属性、负margin和transform属性。
具体使用哪种方法，要根据具体的场景和需求来决定。