我目前有這個;如何在對齊的水平上放置div彼此頂部
但我想是這樣的;
我怎麼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;
}
'.login-page'需要'z-index'嗎?看起來,將'.svg-container'切換到絕對定位就是個訣竅。 – hungerstar
將這兩個元素都定位爲絕對位置,並通過z-index定義它們的圖層順序是安全的,但如果這已經起作用了,那很好。 – Johannes