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

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

  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'
}