Question

我打算向下滑动不要将下面的容器拉下来，但它没有这样做。我尝试在下面的容器顶部设置向下滑动层，这样当它向下滑动时，它将覆盖下面的容器，但有些它是如何工作的。

请帮帮忙。谢谢！

JS

$('#open').click(
        function()
            {
                $('#login form').slideToggle(600);
                $(this).toggleClass('close');
            }

    ) //end click

CSS

#login .close {

    background-color: rgb(110,138,195); 
}

#open:hover {
    color: rgb(0,0,0);
    background-color: rgb(110,138,195); 
}

#login form {
    padding: 10px 10px 10px 10px;
    display: none;  
    background-color: rgb(255,255,255);
}
#login label {
    display: inline-block;
    width: 100px;
    text-align:right;
    margin: 0 15px 0 0;
    color: rgb(58,80,123);
}
#login input {
    font-size: 14px;    
}
#login #button {
    margin-left: 50px;  
}
#open{color: red}
form{z-index:100}
.below{z-index:1}

HTML

<p></p>
<div id="login">
<p id="open">Login</p>
<form>
    <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">Password: </label>
        <input type="text" name="password" id="password">
    </p>
    <p>
        <input type="submit" name="button" id="button" value="Submit" >
    </p>
</form>
</div>
<p class="below">
    I remember writing a story about Halle Berry in college that included a mention of her abusive marriage. “Leave smoke” running away, she said at the time recounting her mother’s advice on handling men who mistreat women. For whatever reason, that quote always stuck with me especially as I learned of friends dealing with unhealthy relationships. Back then, I wondered why they stayed. But as I got older I began to understand, especially when I became one of those women who stayed waaaay past a relationship’s expiration date. And like many other women, I made excuses and didn’t know when enough was enough. Over time and with the help of friends and family who’ve been through similar situations, I learned the major deal breakers to look out for. Yes, we’re talking MAJOR. </p>

Answer 1

你需要在css中将表单设置为绝对位置

#thisform{
    position:absolute;
}

请参阅DEMO

Answer 2

您需要为position设置form css规则才能使其稳定。试试这个

Demo

#login form {
    padding: 10px 10px 10px 10px; /* Remove */
    display: none;  
    background-color: rgb(255,255,255);
    position:absolute;  /* Added */
    left:0; /* Added */
    width:100%; /* Added */
}

Answer 3

您需要像我在此次更新中所做的那样：http://jsfiddle.net/ogv7fqmy/7/

我在css中添加了div#login form { position: absolute;}

JQuery向下滑动不会全部包含下来

3 个答案:

Demo