Question

这是当前状态：

'asd'

我希望这样：

'asd'
我已经通过photoshop进行了编辑，以显示我想要的输出。我尝试了很多东西，但我没有成功。

这是HTML：

<body>
<header>
  <h1>Maxtergo - Guaranteed Perfect Product</h1>
  <nav class='main-menu'>
    <ul>
      <li>
        <a class='active' href='#'>Home</a>
      </li>
      <li>
        <a href='#'>Portfolio</a>
      </li>
      <li>
        <a href='#'>Services</a>
      </li>
      <li>
        <a href='#'>Feature</a>
      </li>
      <li>
        <a href='#'>Contact</a>
      </li>
      <li>
        <a href='#'>Help</a>
      </li>
    </ul>
  </nav>
</header>
<div id='slider'>
  <div id='bannerscollection_zoominout_opportune'>
    <div class='myloader'></div>
    <!-- CONTENT -->
      <ul class="bannerscollection_zoominout_list">

          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText2" ><img src="images/02_opportune.jpg" alt="" width="2500" height="1172" /></li>


          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText3" ><img src="images/03_opportune.jpg" alt="" width="2500" height="1172" /></li>


          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText4" ><img src="images/04_opportune.jpg" alt="" width="2500" height="1172" /></li>

          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText5" ><img src="images/05_opportune.jpg" alt="" width="2500" height="1172" /></li>

滑块上没有css。这是标题CSS：

header {
  overflow: hidden;
  padding: 25px 0px;
  width: 960px;
  margin: 0 auto; }

Answer 1

要确保您的标题显示在上方，请添加z-index

header {
  z-index: 99999;
  overflow: hidden;
  padding: 25px 0px;
  width: 960px;
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
}

Answer 2

首先结束你的<header>和＆＃34;滑块＆＃34;在里面包装。确保你必须提供它的位置＆＃34; relative＆＃34;。之后你必须把<header>作为绝对位置根据您的要求提供高度和宽度。那你必须要将z-index添加到<header>。我们将在此处编码的<header>样式＆＃39; ll 看起来像这样：

header {
   position:absolute;
   top:0;
   bottom:auto;
   left:0;
   right:0;
   margin:auto;
   width:100%;
   height:auto;
}

如何在滑块顶部设置标题

2 个答案: