题解 | #点击按钮隐藏元素#

本题要点：绝对-相对定位，dom style操作

HTML部分：

使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点，这里需要.btn以.box元素基准进行定位，很容易想到相对定位法，将父元素设置为position: relative，而将子元素设置为position:absolute，由于.btn具有20px的宽度和高度，如果想要进行中心点定位，则需要在右上顶点的基础上再往外推20/2=10px，也就是top:-10px、right:-10px

使类为"btn"的div元素中内容"X"垂直水平居中，仅需要设置text-align:center即可

.box {
     width: 100px;
     height: 100px;
     border: solid 1px black;
     /*补全代码*/
     position: relative;
}
.btn{
      width: 20px;
      height: 20px;
      background-color: red;
      /*补全代码*/
      position: absolute;
      top: -10px;
      right: -10px;
      // cursor: pointer; 可不需要
      text-align: center;
}

JavaScript部分：

点击"X"按钮可以使类为"box"的div元素隐藏，则需要为X按钮添加点击事件（这部分代码已经有了），在事件中对整个box施加display:none的样式即可。注意JavaScript可以通过HTML元素对象的style属性进行直接操作。其属性名除带横杠属性名转换为驼峰属性名外，其它均与CSS属性相同。

var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
btn.onclick = function(){
     // 补全代码
     box.style.display = "none"
}