Wie divs übereinander ausgerichtet werden horizontal

Ich habe derzeit dies;Wie divs übereinander ausgerichtet werden horizontal

Aber was ich will, ist dies;

Wie kann ich alles CSS, ich habe versucht, aber ich kann nicht, dies zu erreichen. Zu Beginn muss ich meinen Svg so aufteilen, dass der obere Teil hinter dem Anmeldeformular und der untere Teil vor dem Anmeldeformular liegt. Aber wie bekomme ich sie an der ersten Stelle übereinander?

Mein 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>

Und meine 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; 
}

Quelle

2017-03-07 Mentos93

Lassen Sie beide .login-page und .svg-containerposition: absolute haben, geben sie beide eine z-index, den Z-Index von .svg-container höher als die anderen machen und die Positionen entsprechend anpassen.

Quelle

2017-03-07 16:30:07 Johannes

Ist der 'z-index' für' .login-page' notwendig? Es scheint so, als würde '.svg-container' auf absolute Positionierung umschalten. – hungerstar

Wenn beide Elemente absolut positioniert sind und ihre Ebenenreihenfolge über den Z-Index definiert ist, ist dies auf der sicheren Seite, aber wenn das schon funktioniert, ist es in Ordnung. – Johannes

Wenn Sie nicht über eine komplizierte Konstruktion dafür haben, ist das, was Sie könnten versuchen, mit Hilfe float und Zentrierung mit margin, width und height. Dann benutze die Polsterung für die Nordwand, um sie an der Position zu halten, an der du sie haben willst, beide Divs.

Zum Beispiel etwas einfach wäre:

#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>

Diese grob ist, wie ich es tun würde. Im Allgemeinen überlagere ich die Dinge nicht, es sei denn, es ist notwendig, ich bin besser dran, beide Bilder direkt zu bearbeiten und übereinander zu legen und sie durch die bearbeitete zu ersetzen.

Ich lerne immer noch, es gibt definitiv viel bessere und einfachere und weniger verwirrende Wege, es zu tun, aber das ist meine Methode. Ich kann das sehr leicht verstehen, also gehe ich damit um.

Ich hoffe, dass dies in keiner Weise hilft.

Quelle

2017-03-07 16:41:34 Mark

Wie divs übereinander ausgerichtet werden horizontal

Antwort

Verwandte Themen