Question

这是我的网站html代码。我是html的新手，也是stackoverflow的新手，所以我没有提问的经验，所以如果有错误请忽略它们。我正在创建一个带有固定标题和固定左侧边栏的搜索页面，但每次我尝试这个时，搜索的主要部分显示在标题div之上。我需要帮助才能解决此问题。

以下是该页面的html代码

header{
	display: block;
	left:0;
	width: 100%;
	height: 40px;
	background-color: #333;
	z-index: 20;
}
body{
	background-color: #f2f2f2;
	width: 100%;
	bottom:0;	
	overflow: auto;

}
#main{
	clear: both;
	display:block;
	position: relative;
	width: 98%;
	margin: auto;
	height: 100%;
	background-color: white;
}
#fixed_top{
	display: block;
	position: absolute;
	width:100%;
	z-index: 20;
}
#search_top_fixed_header{
	display: block;
	position: fixed;
	width: 98%;
	margin-left: 1%;
	z-index: 20;

}
#aside_wrapper{
	display: block;
	position: absolute;

	width: 30%;
	height:100%;
}
#left_aside{
	display: inline-block;
	position: fixed;
	width: 30%;
	top:200px;
	background-color: black;
	height:100%;
}
#main_search_wrapper{
	display: block;
	position: absolute;
	width: 68%;
	right:1%;
	top: 200px;
	height:100%;
	background-color: brown;
}
#mains{
	display: block;
	position: relative;
	width: 98%;
	height: 100%;
	margin-left:1%;
	background-color: white;
}
#search_heading{
	margin-top: 20px;
}

<body>
	<div id="fixed_top">
	<div id="search_top_fixed_header">
		<header>
	<h1 id="logo">
	Naats.com
	</h1>
	<span id="search">
	<form name="header_search" id="header_search" action="" method="get">
	<input type="text" id="search_bar" name="searchq" autocomplete="off" placeholder="     search naat.com" /><button id="search_submit"></button>
	</form>
	</span>
	<span id="login_logout_header">
		<a href="#1"><img src="./images/header_login_button.png" id="header_login_button"></a><span style="display:inline;height:20px;bottom:13px;line-height:40px;position:relative;color:white">OR</span><a href="#2"><img src="./images/header_signup_button.png" id="header_signup_button"></a>

	</span>
</header>
<h1 id="search_heading">Search results for "anees ijaz"</h1>
<hr>
	</div>
	</div>
	<div id="mains">
	<div id="aside_wrapper">
		<aside id="left_aside">
			a
		</aside>
	</div>
	<div id="main_search_wrapper">
		a
	</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a
	</div>
	</body>

Answer 1

这不是z-index的问题，标题部分只是具有透明背景，因此当您向上滚动时，红色框将在视口中移动并在标题下可见。

如果您坚持使用fixed定位，只需添加以下CSS即可在标题部分添加白色背景：

#search_top_fixed_header {
  ⋮
  background: #FFF;
  top: 0;
}

演示：

＆＃13;

header {
  display: block;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #333;
  z-index: 20;
}

body {
  background-color: #f2f2f2;
  width: 100%;
  bottom: 0;
  overflow: auto;
}

#main {
  clear: both;
  display: block;
  position: relative;
  width: 98%;
  margin: auto;
  height: 100%;
  background-color: white;
}

#fixed_top {
  display: block;
  position: absolute;
  width: 100%;
  z-index: 20;
}

#search_top_fixed_header {
  display: block;
  position: fixed;
  width: 98%;
  margin-left: 1%;
  z-index: 20;
  background: #FFF;
  top: 0;
}

#aside_wrapper {
  display: block;
  position: absolute;
  width: 30%;
  height: 100%;
}

#left_aside {
  display: inline-block;
  position: fixed;
  width: 30%;
  top: 200px;
  background-color: black;
  height: 100%;
}

#main_search_wrapper {
  display: block;
  position: absolute;
  width: 68%;
  right: 1%;
  top: 200px;
  height: 100%;
  background-color: brown;
}

#mains {
  display: block;
  position: relative;
  width: 98%;
  height: 100%;
  margin-left: 1%;
  background-color: white;
}

#search_heading {
  margin-top: 20px;
}

＆＃13;

<!-- header -->
<div id="fixed_top">
  <div id="search_top_fixed_header">
    <header>
      <h1 id="logo">Naats.com</h1>
      <span id="search">
        <form name="header_search" id="header_search" action="" method="get">
          <input type="text" id="search_bar" name="searchq" autocomplete="off" placeholder="search naat.com" />
          <button id="search_submit">search</button>
        </form>
      </span>
      <span id="login_logout_header">
        <a href="#1"><img src="./images/header_login_button.png" id="header_login_button"></a>
        <span style="display:inline;height:20px;bottom:13px;line-height:40px;position:relative;color:white">OR</span>
        <a href="#2"><img src="./images/header_signup_button.png" id="header_signup_button"></a>
      </span>
    </header>
    <h1 id="search_heading">Search results for "anees ijaz"</h1>
    <hr>
  </div>
</div>

<!-- main container -->
<div id="mains">

  <!-- sidebar -->
  <div id="aside_wrapper">
    <aside id="left_aside">
      a
    </aside>
  </div>

  <!-- content -->
  <div id="main_search_wrapper">
    a
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>a
</div>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/odz66vp8/1/

P.S不建议将<form>等块级元素放在内联元素中，如<span>（从语义上讲）。

为什么z-index不适用于具有绝对位置的div元素

以下是该页面的html代码

1 个答案: