如何在Socket Div背景上覆盖一个页脚Widget背景？

<div id="socketDiv">
  <!-- 这里可以放置其他内容 -->
  <footer>
    <!-- 页脚Widget的内容 -->
  </footer>
</div>

#socketDiv {
  background-color: #f1f1f1; /* 设置Socket Div的背景颜色 */
  position: relative; /* 设置定位为相对定位，以便后续设置页脚Widget的绝对定位 */
}

#socketDiv footer {
  background-color: #fff; /* 设置页脚Widget的背景颜色 */
  position: absolute; /* 设置绝对定位，以便覆盖在Socket Div上面 */
  bottom: 0; /* 设置距离Socket Div底部的距离为0 */
  left: 0; /* 设置距离Socket Div左侧的距离为0 */
  width: 100%; /* 设置宽度为100%，与Socket Div宽度保持一致 */
  height: 50px; /* 设置页脚Widget的高度，根据实际需求调整 */
}

// 示例：点击页脚Widget时改变其背景颜色
var footer = document.querySelector('#socketDiv footer');
footer.addEventListener('click', function() {
  footer.style.backgroundColor = '#ff0000'; // 修改页脚Widget的背景颜色为红色
});