前端代码 但你点击搜索按钮的时候 然后在当前的盒子进行嵌套覆盖 然后重新展示别的样式

这个需求需要使用 JavaScript 来实现，可以先给搜索按钮绑定一个点击事件，然后在点击事件中获取到输入框中的内容，发送请求获取到搜索结果，最后将搜索结果渲染到当前盒子中。

具体代码如下：

HTML：

<div id="search-box">
  <input type="text" id="search-input">
  <button id="search-btn">搜索</button>
</div>

<div id="result-box">
  <!-- 搜索结果展示区域 -->
</div>

JavaScript：

// 获取 DOM 元素
var searchBox = document.getElementById('search-box');
var searchInput = document.getElementById('search-input');
var searchBtn = document.getElementById('search-btn');
var resultBox = document.getElementById('result-box');

// 给搜索按钮绑定点击事件
searchBtn.addEventListener('click', function() {
  // 获取输入框中的内容
  var keyword = searchInput.value.trim();

  // 发送请求获取搜索结果
  // 这里可以使用 AJAX 或者 fetch 等方式发送请求

  // 假设获取到的搜索结果是一个数组
  var result = ['结果1', '结果2', '结果3'];

  // 渲染搜索结果
  var html = '';
  for (var i = 0; i < result.length; i++) {
    html += '<div>' + result[i] + '</div>';
  }
  resultBox.innerHTML = html;

  // 隐藏搜索框并显示搜索结果
  searchBox.style.display = 'none';
  resultBox.style.display = 'block';
});

上面的代码是一个简单的示例，具体实现还需要根据实际需求进行调整。