Question

我目前有这个;

但我想要的是这个;

我如何css一切，我已经尝试过，但我没有做到这一点。首先，我需要拆分我的svg，使得顶部位于登录表单后面，而底部位于登录表单的前面。但是如何让我们在第一个地方让他们互相攻击？

我的HTML;

<body>
    <div class="container">
        <div class="login-page">
            <form action="xxxx" method="post">
                <h1>Wsdfgdfgb</h1>
                <input class="input" type="text" name="_username" placeholder="xxxx"
               value="xxxx" required />
                <input class="input" type="password" name="_password"
               placeholder="xxxx" required />
                <label class="text" for="remember_me">
                    <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
            Remember me
                </label>        
                <button>Log In</button>
            </form>
        </div>
        <div class="svg-container">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="250px" viewBox="0 0 1920 960" enable-background="new 0 0 1920 960" xml:space="preserve">
                <g>
                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="M64.91,510.275c1.152,15.744,5.364,30.809,10.41,45.648......"/>
                </g>
            </svg>
        </div>
    </div>
</body>

我的CSS;

body {
    background: #1AB394; /* fallback for old browsers */
    background: -webkit-linear-gradient(right, #1AB394, #008374);
    background: -moz-linear-gradient(right, #1AB394, #008374);
    background: -o-linear-gradient(right, #1AB394, #008374);
    background: linear-gradient(to left, #1AB394, #008374);
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    position: absolute;
    left: 50%;
}

.login-page {
    position: relative;
    left: -50%;
    width: 360px;
    padding: 8% 0 0;
    margin: auto;
}

.svg-container {
    position: relative;
    left: -50%;
    z-index: 1000;
}

form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

form h1 {
    text-align: center;
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
}

form input[type="text"], form input[type="password"] {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

form input[type="checkbox"] {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

form .text {
    color: #b3b3b3;
    font-size: 14px;
}

form .err {
    color: #EF3B3A;
    font-size: 14px;
    text-align: center;
    margin: 0 0 15px;
}

form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #1AB394;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

form button:hover,form button:active,form button:focus {
    background: #18A689;
}

Answer 1

让.login-page和.svg-container都有position: absolute，同时给他们z-index，使.svg-container的z-index高于另一个，{相应地调整位置。

Answer 2

如果您没有复杂的设计，可以尝试使用float并以margin，width和height为中心。。然后使用北面的填充将它保持在你想要的位置，两个div。

例如，简单的事情就是：

#one
    {
    background-color: rgba(0,0,0,0.5);
    width: 60%%;
    height: 50vw;
    margin: auto;
    padding: 20vw 0 0 0;
    }
    
#two
    {
    float: left;
    background-color: rgba(0,255,38,0.6);
    width: 110%;
    height: 10vw;
    margin: auto;
    margin: 10vw 0 0 0;
    padding: 30vw 0 0 0;
    }

<div id="one">test
<div id="two">test
</div></div>

这大致是我会这样做的。除非有必要，否则我通常不会覆盖一些东西，我最好直接编辑两个图像并将其叠加在另一个上，然后将其替换为编辑过的图像。

我还在学习，肯定会有更好，更容易和更少混淆的方法，但这是我的方法。我很容易理解这一点，所以我顺其自然。

我希望这对任何方面都有帮助。

如何将div放在彼此顶部对齐的水平方向上

2 个答案: