Question

我正在尝试使用已修复的标头创建一个网站。在标题上方，我有一个“登录”div在-40px，因此只显示“登录”标签。我试图让jQuery将所有内容（标题，容器，页脚等）向下推40像素，以使登录表单可见。我该怎么做？

这是我的header.php包含：

<div id="login" class="full">
            <div id="login-form" class="container">
            <input type="button" name="submit" id="submit" value="Log In">
            <input name="password" id="word" placeholder="PASSWORD">
            <input name="user" id="user" placeholder="EMAIL ADDRESS">

            </div>
            <div id="login-tab" class="container">
                <a href="#">Log In</a>
            </div>
</div>
<div id="header-bg" class="full">

        <header class="container group">
                <div id="logo" class="third">
                           <img src="images/logo-side.png" width="100%"/>
                </div>
                <!--<div id="login" class=" ">
                <form>
                <input name="email" type="text" value="">
                <input name="password" type="text" value="">
                <input name="login-submit" type="button" value="log in">
                </form>
                </div>-->
                <nav>
                        <ul>
                            <li><a href="index.html" class="active">home</a></li>
                            <li><a href="#">development</a></li>
                            <li><a href="#">availability</a></li>
                            <li><a href="#">about</a></li>
                            <li><a href="#">contact</a></li>
                        </ul>
                </nav>
        </header>
</div>


        <div id="container" class="container">

继承人登录div的CSS：

#login {
background:#365160 ;
height:40px;
position:fixed;
top:-33px;
z-index:10;
border-bottom:1px solid #ea9919;
font-family:Arial, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}   
#login-tab a {
background:#365160;
color:#fff;
margin-top:30px;
margin-right:-390px;
padding:0px 15px;
float:right;
border-radius:0 0 2px 2px;  
display:block;  
border-left:1px solid #ea9919;border-bottom:1px solid #ea9919;border-right:1px solid #ea9919;
}

header-bg div：

#header-bg {
position:fixed;
top:11px;
background:#fff url(../images/crossword.png) repeat;
box-shadow: 0px 3px 4px 0px #999;

border-bottom:1px solid #ccc;
}

有什么建议吗？我真的迷路了。谢谢！

Answer 1

如果标头为position: fixed，则它永远不会受到页面上其他内容的影响。你有几个选择：

使用javascript按下内容
重构您的css / html，以便您不使用position: fixed，或者至少没有任何内容
包含具有固定标头的登录内容，因此它们位于相同的渲染上下文

JQuery slideToggle在按下其余内容的同时修复了div

1 个答案: