css divs позиционирование неправильно перекрывается посередине

Question

Я понятия не имею, в чем проблема! Независимо от того, что я пробовал, он не работает, divs просто перекрываются в середине экрана. Я попытался использовать все возможные комбинации отображения и положения. Мне нужны дивы, чтобы идти один под другим.

http://jsfiddle.net/s2dv6agr/

пожалуйста, помогите :(

 #container{ 
     position: relative; 
    } 

    #container1{ 
     position: absolute; 
     z-index: 100; 
    } 

    #container2{ 
     position: absolute; 
     z-index: 110; 
    } 

Answer 1

Предполагая, что следующий HTML

<div id="container"> 
    <div id="container1"> 
    Hello 
    </div> 
    <div id="container2"> 
    Hello again 
    </div> 
</div> 

---

#container { 
    position: relative; 
} 

#container1 { 
    position: relative; 
    z-index: 100; 
} 

#container2 { 
    position: relative; 
    z-index: 110; 
} 

Это будет отображаться ниже друг друга.

http://jsfiddle.net/baLz1tvo/

Answer 2

Удалить position:absolute и использовать position:relative на везде.
Использование:

#container1{float: left} 
    #container2{float:right} 

Answer 3

Попробуйте это: просто пример

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t font-size: 62.5%; 
 
\t font-family: Helvetica, sans-serif; 
 
\t background: url(images/stripe.png) repeat; 
 
} 
 

 
p { 
 
\t font-size: 1.3em; 
 
\t margin-bottom: 15px; 
 
} 
 

 
#page-wrap { 
 
\t width: 660px; 
 
\t background: white; 
 
\t padding: 20px 50px 20px 50px; 
 
\t margin: 20px auto; 
 
\t min-height: 500px; 
 
\t height: auto !important; 
 
\t height: 500px; 
 
} 
 

 
#contact-area { 
 
\t width: 600px; 
 
\t margin-top: 25px; 
 
} 
 

 
#contact-area input, #contact-area textarea { 
 
\t padding: 5px; 
 
\t width: 371px; 
 
\t font-family: Helvetica, sans-serif; 
 
\t font-size: 1.4em; 
 
\t margin: 0px 0px 10px 0px; 
 
\t border: 2px solid #ccc; 
 
} 
 

 
#contact-area textarea { 
 
\t height: 90px; 
 
} 
 

 
#contact-area textarea:focus, #contact-area input:focus { 
 
\t border: 2px solid #900; 
 
} 
 

 
#contact-area input.submit-button { 
 
\t width: 100px; 
 
\t float: right; 
 
    margin-top:30px; 
 
    
 
} 
 

 
label { 
 
\t float: left; 
 
\t text-align: right; 
 
\t margin-right: 15px; 
 
\t width: 100px; 
 
\t padding-top: 5px; 
 
\t font-size: 1.4em; 
 
}

<div id="contact-area"> 
 
\t \t \t 
 
\t \t \t <form method="post" action="contactengine.php"> 
 
\t \t \t \t <label for="Name">Gaming:</label> 
 
\t \t \t \t <input type="text" name="Name" id="Name" /> 
 
\t \t \t \t 
 
\t \t \t \t <label for="City">Sports:</label> 
 
\t \t \t \t <input type="text" name="City" id="City" /> 
 
\t 
 
\t \t \t \t <label for="Email">Watching Tv:</label> 
 
\t \t \t \t <input type="text" name="Email" id="Email" /> 
 
\t \t \t \t 
 
\t \t \t \t <label for="Email">Sleeping:</label> 
 
\t \t \t \t <input type="text" name="Email" id="Email" /> 
 
\t \t \t \t 
 
     <label for="Email">Hiking:</label> 
 
\t \t \t \t <input type="text" name="Email" id="Email" /> 
 
\t \t \t \t 
 
\t 
 
     <label for="Email">Skiing:</label> 
 
\t \t \t \t <input type="text" name="Email" id="Email" /> 
 
\t \t \t \t 
 
\t \t \t \t <input type="submit" name="submit" value="Add my info" class="submit-button" /> 
 
\t \t \t </form>

Answer 4

Можете ли вы дать некоторые объяснения position: absolute, как правило, если мы используем position: absolute, все приходят к родителю элемент. Используйте position: absolute с top, left, right, bottom свойства для выравнивания различных мест.