如何在對齊的水平上放置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; 
}

來源

2017-03-07 Mentos93

讓雙方.login-page和.svg-container有position: absolute，給他們倆一個z-index，使其中一個比另一個.svg-container更高的z-index並相應地調整位置。

來源

2017-03-07 16:30:07 Johannes

'.login-page'需要'z-index'嗎？看起來，將'.svg-container'切換到絕對定位就是個訣竅。 – hungerstar

將這兩個元素都定位爲絕對位置，並通過z-index定義它們的圖層順序是安全的，但如果這已經起作用了，那很好。 – Johannes

如果您還沒有爲它複雜的設計，這是你可以嘗試一下，使用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>

這大約是我會怎麼做。除非必要，否則我通常不會疊加任何東西，我最好直接編輯兩個圖像並將其疊加在一起，然後將其替換爲編輯的圖像。

我還在學習，肯定有更好，更容易，更容易混淆的方式來做到這一點，但這是我的方法。我可以很容易地理解這一點，所以我隨它去。

我希望這有助於以任何方式。

來源

2017-03-07 16:41:34 Mark

如何在對齊的水平上放置div彼此頂部

回答

相關問題