Css 如何锁定此网页中的标题

我有两个框，需要在这个网页上锁定，但当我试图锁定它们时，它会改变大小和身体滚动它

我需要标题显示所有内容并锁定

代码如下：

HTML

页面在这里试图锁定菜单和上面的所有内容。所以所有的东西都在它下面滚动

---

谢谢

您的HTML标记错误。你的

包含了你身体的大部分内容。进行以下更改

更新了标题HTML，其他所有内容都应位于

<header>
        <div class="head-box1">
        <div class="main">
            <h1><a class="logo" href="index.html">pro web hosting</a></h1>
            <nav>
              <div style="text-align:right;"> <span class="link2"><a href="https://webhost.pro/account/clientarea.php">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span><span class="phone"><br>
                Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
                </span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
          </nav>
        </div>
        <div class="clear"></div>
        </div>

        <div id="cssmenu">
<ul>
   <li class="active"><a href="/"><span>Home</span></a></li>
   <li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
   <li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
   <li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
   <li><span><a href="/support.htm">Support</a></span></li>
   <li><a href="/affiliates/index.htm"><span>Affiliates</span></a></li>
   <li class="last"><a href="/why-us.html"><span>Why us</span></a></li>
</ul>
</div>


 </header>

---

@CharlesYarbrough没问题。接受答案就好了！；）我很乐意，但我不知道怎么做，我也没有足够的声誉去投票支持任何事情：（PS我到处检查，想找到一个接受它的方法。也许我也需要声誉点数。@CharlesYarbrough在向上/向下投票箭头下面应该有一个灰色的复选标记，你只需按下它！如果你不存在，那么我没有线索。：）

header {
    width:100%;
    position:relative; 
    z-index:2;
}
.logo {
    display:block;
    width:300px;
    height:75px;
    text-indent:-5000px;
    background:url(/images/logo.png) 0 0 no-repeat;
}
.nothing {
    color: #ffffff;
    font-size:20px;
    text-decoration:none;
    padding: 10px 0px 0px 0px;
}
.head-box1 {
    padding-bottom:10px;
    background-color: #F4F3F3;
}
.main {
    width:960px;
    padding:0;
    margin:0 auto;
}
body{
    color:#333;
    position:relative;
    min-width:980px;
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    background-color: #F4F3F3;
    background-repeat: no-repeat;
    background-position: center 0;
}
html,body{height:100%;}
p{padding-bottom:18px;}
a{
    color:#333;
    outline:none;
    cursor:pointer;
    text-decoration:none;
}
/*** MENU ***/
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        5;
    list-style:     none;
}

nav {
    float:right;
    margin-right:10px;
    padding-top:25px;
    width:500px;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu li {
    float:          right;
    position:       relative;
    margin-left:20px;   
}
.sf-menu a {
    display:        block;
    position:       relative;
    color:#CCCCCC;
    text-transform:capitalize;
    font-size:12px;
    line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
    color:#FFFFFF;
    text-decoration:none;
}

.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
    color:#1f4460;
}

.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
    color:#58a5c4;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
    width:          160px; /* left offset of submenus need to match (see below) */
    padding-top: 19px;
    padding-right: 0;
    padding-bottom: 8px;
    padding-left: 0;
}

.sf-menu ul:after {
    display:block;
    position:absolute;
    width:11px;
    height:6px;
    background:url(../images/marker1.png) no-repeat 0 0;
    top:-6px;
    left:14px;
    content:'   ';
}

.sf-menu ul ul:after {
    display:block;
    position:absolute;
    width:5px;
    height:9px;
    background:url(../images/marker2.png) no-repeat 0 0;
    top:13px;
    left:-5px;
    content:'   ';
}

.sf-menu ul ul  {
    position:       absolute;
    top:            -999em;
    padding:10px 0 6px;
    background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
    width:          140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:          100%;
    margin:0 25 30px;
    padding:20px 0 0px;
    text-align:center;
}
.sf-menu ul a {
    font-size:12px;
    color:#fff;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: -17px;
    top: 32px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 151px;
    top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}

<header>
        <div class="head-box1">
        <div class="main">
            <h1><a class="logo" href="index.html">pro web hosting</a></h1>
            <nav>
              <div style="text-align:right;"> <span class="link2"><a href="https://webhost.pro/account/clientarea.php">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span><span class="phone"><br>
                Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
                </span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
          </nav>
        </div>
        <div class="clear"></div>
        </div>

        <div id="cssmenu">
<ul>
   <li class="active"><a href="/"><span>Home</span></a></li>
   <li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
   <li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
   <li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
   <li><span><a href="/support.htm">Support</a></span></li>
   <li><a href="/affiliates/index.htm"><span>Affiliates</span></a></li>
   <li class="last"><a href="/why-us.html"><span>Why us</span></a></li>
</ul>
</div>


 </header>

header {
  width: 100%;
  position: fixed;
  z-index: 2;
}

body {
  top: 150px;
}