<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>单选按钮实现窗口关闭布局</title> <meta name="author" content="" /> <style> *{margin:0;padding:0;} ul li{list-style:none;} .first{ position:relative; background:#0f0; width:500px; } .chk_1 { display: none; } .chk_1 + label { width:30px; height:30px; text-align:center; line-height:30px; background-color: #FFF; background: rgba(255, 0, 107, 0.83); padding: 5px; display: inline-block; position: absolute; right: 0; top: 0; z-index:2; } .chk_1:checked + label { display:none; } .chk_1:checked + label:after { display:none; } .second{ position:absolute; z-index:1; width:500px; height:300px; background:#FF00DF; } .chk_1:checked ~ div{ display:none; } </style> </head> <body> <div> <ul> <li class='first'> <input type="checkbox" id="checkbox_a1" class="chk_1" /> <label for="checkbox_a1">X</label> <div class='second'></div> </li> </ul> </div> </form> </body> </html>