Show, hide

　　By setting css displayed on HTML pages, hidden in the following ways:

　　The following pages a more clear understanding of:　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    <link rel="stylesheet" href="display.css">
</head>
<body>
    <div class="content">
        <div class="part1">part1</div>
        <div class="part2">part2</div>
        <div class="part3">part3</div>
    </div>
</body>
</html>

.content
{
    width: 400px;
    height: 200px;
    background: #0395e1;
    position: relative;
}
.part1
{
    width: 100px;
    height: 100px;
    background: #e53935;
    position: absolute;
    left: 50px;
    top:50px;
    z-index:5;
}
.part2
{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    left: 50px;
    top:50px ;
    z-index:2;
}
.part3
{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    right: 50px;
    top:50px ;
}

　　The current show is:

　　1. display: none set

　　Join now part3 display: none

.part3
{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    right: 50px;
    top:50px ;
    display: none;
}

　　Page displays:

　　It can be seen now are hidden part3

　　2. Set opacity with transparency, opacity when the value is 0, part2 not see the page

.part3
{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    right: 50px;
    top:50px ;
    opacity:0;
}

　　3 can also be achieved by covering the z-index

　　Initially set up three parts, but part1 part2 level higher than the level, so part1 part2 is covered, if you want to hide part1, you can change the hierarchy, so that a higher level than part1 part2, they can block part1 part2, part1 achieve Hide.

.part1
{
    width: 100px;
    height: 100px;
    background: #e53935;
    position: absolute;
    left: 50px;
    top:50px;
    z-index:5;
}
.part2
{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    left: 50px;
    top:50px ;
    z-index:20;
}
.p

Guess you like