.box01{ width: 40%; height: 150px; border-radius: 5%; background-color: aquamarine; } .popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; visibility: hidden; transition: .6s; } .is-show { opacity: 1; visibility: visible; } .popup-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; height: 80%; padding: 50px; background-color: #fff; z-index: 2; } .close-btn { position: absolute; right: 0; top: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; z-index: 9999; } .close-btn i { font-size: 20px; color: #333; } .black-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1; cursor: pointer; } .hidden{ visibility: hidden; transition: .6s; opacity: 0; } /*======================*/ #goul{ height: 200px; width: auto; } .apple{ position: absolute; width: 50px; height: 50px; }