本地搜索框被覆盖

[sqduan]

I agree and want to create new issue

• Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• Yes, I was on NexT Documentation Site.
• And yes, I already searched for current issues and this is not help to me.

---

Expected behavior

在配置本地搜索框后，在博客首页单击搜索，弹出搜索框

Actual behavior

可以显示搜索框，但是搜索框没有置于页面顶层，而是被覆盖，页面呈现灰色。

Steps to reproduce the behavior

1. 进入博客任意页面，单击搜索框
   
2. 弹出搜索框，发现搜索框位置异常
   

• Link to demo site with this issue: http://alittlehusky.cn/
• Link(s) to source code or any usefull link(s): N/A

Node.js and NPM Information

v10.16.0
6.9.0

Package dependencies Information

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "dependencies": {
    "aplayer": "^1.10.1",
    "hexo": "^3.8.0",
    "hexo-deployer-git": "^1.0.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-tag": "^0.2.0",
    "hexo-inject": "^1.0.0",
    "hexo-math": "^3.0.4",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-kramed": "^0.1.4",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.3",
    "hexo-tag-aplayer": "^3.0.4"
  }
}

Hexo Information

Hexo version

hexo: 3.8.0
hexo-cli: 2.0.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.16.0
v8: 6.8.275.32-node.52
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 4
openssl: 1.1.1b
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 一隅
subtitle: 记录生活
description: Do Not Go Gentle Into That Good Night
keywords:
author: Shiqi Duan
language: zh-CN
timezone: 

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/sqduan/sqduan.github.io.git
  branch: master
  
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

NexT Information

NexT Version:

• Latest Master branch
• Latest Release version
• Old version

NexT Scheme:

• All schemes
• Muse
• Mist
• Pisces
• Gemini

NexT Configuration:

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

Other Information

[welcome]

Thanks for opening this issue, maintainers will get back to you as soon as possible!

[stevenjoezhang]

看上去有一些自定义样式？

建议移除这些内容，或者重新下载NexT，检查问题是否仍然存在。

[sqduan]

看上去有一些自定义样式？

建议移除这些内容，或者重新下载NexT，检查问题是否仍然存在。

找到问题了，在设置header透明度后，会导致上述问题的出现。

.header { background: #fff; opacity: 0.8; }

[stevenjoezhang]

设置 opacity 的元素会创建新的层叠上下文。已在这里备注： next-theme/hexo-theme-next#4
另见 #490