“无依赖绝对定位”与下拉列表定位实例页面

展示

代码

• HTML：

  <div class="search-box">
      <input class="search-input" placeholder="搜索"><a href="javascript:" class="search-btn">搜索</a>
      <div class="search-result">
          <div class="search-datalist">
              <a href>搜索结果1</a>
              <a href>搜索结果2</a>
              <a href>搜索结果3</a>
              <a href>搜索结果4</a>
              <a href>搜索结果5</a>
          </div>
      </div>
  </div>

• 核心CSS：

  .search-input { 
      width: 200px; height: 20px; 
      line-height: 20px; 
      padding: 9px 39px 9px 9px; 
      border: 1px solid #ddd; 
  }
  /* 搜索按钮的无依赖绝对定位 */
  .search-btn { 
      width: 20px; height: 20px; 
      border: 9px solid #fff; 
      background: #ddd url(search.png) no-repeat center;
      position: absolute; margin: 1px 0 0 -40px;
  }
  /* 下拉列表的无依赖绝对定位 */
  .search-datalist { 
      position: absolute; 
      width: 248px; 
      border: 1px solid #e6e8e9; 
      background-color: #fff;
  }
  
  /* 搜索列表的显隐控制 */
  .search-result {
      display: none;
  }
  .search-input:focus ~ .search-result {
      display: block;
  }