官方题解 | #HTML+CSS+JS综合——点击按钮隐藏元素#

本题考点：定位、样式、元素获取

根据题目要求，分析出本题核心步骤有五：

1. 设置类名为“box”的div标签元素定位为相对定位
2. 设置类名为“btn”的div标签元素定位为绝对定位
3. 计算类名为“btn”的div标签元素中心定位在类名为“box”的div标签元素右上顶点的坐标
4. 设置类名为“btn”的div标签元素内容居中且行高等于该标签的高度
5. 在类名为“btn”的div标签元素点击事件中，设置类名为“box”的div标签元素“display”属性为“none”

首先设置类名为"box"的div标签元素定位属性为相对定位，这是为了保证类名为“btn”的div标签元素绝对定位有效。然后设置类名为“btn”的div标签元素定位属性为绝对定位以完成位置的固定，同时根据该元素的宽度和高度计算出定位坐标top：-10px、right：-10px，还要设置该元素的水平居中属性和行高属性为该元素的高度，以保证字体可以垂直居中在该元素中。最后在类名为“btn”的div标签元素点击事件中设置类名为"box"的div标签元素“style”属性中的“display”属性为"none"即可。

参考答案：

.box {
    width: 100px;
    height: 100px;
    border: solid 1px black;
    position: relative;
}
.btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 20px;
    background-color: red;
}

btn.onclick = function() {
     document.getElementsByClassName('box')[0].style.display = 'none'
}