Parrent Element negative Marge und Kind-Element scheint collabs

Question

Grüße

Ich habe serius Problem, ich brauche in einem div div in div zu bewegen, aber es funktioniert nicht. Meine Frage ist, wenn es keine Probleme mit negativen Margen oder Kindelement von Element mit Marginproblem geben könnte.

Es scheint, negative Marge kollabiert mit positiven Rand in Kind Element.

Der Rand des untergeordneten Elements ist ein bewegliches Element.

here is fiddle meines Problems.

Was ich erreichen will ist, dass:

a. Artikel div überschneidet sich mit der Hauptüberschrift, ich habe versucht, die absolute Position zu vermeiden, also ging ich für die negative Marge.

b. Der Text wird in einem Artikel div eingegrenzt. Von oben.

<div class="container"> 
    <div class="main-heading"><h1>Main Heading</h1></div> 
    <div class="wraper"> 
     <div class="article"> 
      <div class="text"><p>Text</p></div> 
     </div> 
    </div> 
</div> 

Auch hier ist ein Problem in CSS:

div { 
    width: 100%; 
} 
.container { 
} 
.heading { 
} 
.wraper { 
    margin-top: -100px; 
    height: 500px; 
} 
.article { 
    margin-top: 0; 
    height: 200px; 
} 
.text { 
    margin-top: 120px; 
    height: 50px; 
} 

Wie gesagt, Marge von Textelement scheint auch Artikel Element von oben zu bewegen. Es ist mir oder wo ist das Problem, und was ist die Lösung oder workaraund? Vorzugsweise auch ohne absolute Position, aber wenn Sie sie wirklich brauchen, machen Sie sich keine Sorgen, aber löschen Sie es irgendwie, damit es als Teil der Spalte verwendet werden kann und nicht mit dem oberen/unteren Inhalt interagiert.

Danke verry viel für Ihre Zeit

edit:picture of what I want to achieve

Das schwarze Rechteck ist Wrapper, Katze Artikel Text ist Text, aber die Margen jetzt ganzen Artikel zu bewegen.

Answer 1

ich einen ähnlichen toppic auf diese gefunden, kommt es in allen wichtigen Browsern, und dazu gibt es eine einfache Lösung. Es ist ein Muss overflow Attribut in CSS verwenden ...

I

verwendet

overflow: auto; 

Auf parrent Elemente, und es funktionierte.

Answer 2

Basierend auf Ihren Kommentar und was ich denke, Sie fragen:

<div class="image"> 
    <p>PRESTO</p> 
</div> 

.image { 
    display:block; 
    position:relative; 
    background-color:grey; 
    width:300px; 
    height:200px; 
} 
p { 
    display:none; 
    position:absolute; 
    top:0; 
    width:100%; 
    text-align:center; 
    color:orange; 
    font-size:2em; 
} 
.image:hover > p { 
    display:block; 
} 

FIDDLE:

https://jsfiddle.net/su5aqs3p/2/