Wie schiebe ich ein Element in und aus einer Div

Question

Ich versuche, besser zu JS und CSS, also mache ich ein gefälschtes iPhone und versuche das simulieren das Aussehen von, wenn eine Textblase ein- und ausschaltet Bildschirm. This ist, wie es bisher aussieht, und das ist der HTML-Code für das Telefon selbst:

<div id="iPhone"> 
    <div id="screen"></div> 
    <div id="me" class="bubble"></div> 
    <div id="homeButton" class="circle"></div> 
</div> 

Neben dem Stylesheet:

#iPhone { 
    position: fixed; 
    width: 250px; 
    height: 500px; 
    background-color: black; 
    border-radius: 25px; 
    top: 50%; 
    right: 30%; 
    transform: translate(-50%, -50%); 
    -webkit-filter: blur(3px); 
    box-shadow: 0 0 40px 20px white; 
    border: solid 2px white; 
} 

#me { 
background-color: #1D62F0; 
margin-top: 130%; 
margin-left: 25%; 


} 

#me::after{ 
    content: ""; 
    position: absolute; 
    right: 0em; 
    bottom: 0; 
    width: 0.5em; 
    height: 1em; 
    border-left: 0.5em solid #1D62F0; 
    border-bottom-left-radius: 1em 0.5em; 
} 

#screen { 
position: fixed; 
    width: 241px; 
    height: 370px; 
    background-color: white; 
    border-radius: 0px; 
    top: 8%; 
    left: 1%; 
    -webkit-filter: blur(3px); 
    border: solid 2px black; 

} 

Im Moment gibt es keine JS es regeln. Wie schiebe ich es natürlich auf den "Bildschirm" div und verschwinden dann von oben, genau wie eine echte Textnachricht?

Danke!

Answer 1

Sie müssen die overflow: hidden Eigenschaft auf dem Nachrichtencontainer div setzen, dann einfach neue Nachrichtenfelder unter die bereits vorhandenen schieben, damit sie schließlich verschwinden.