élément Parrent marge négative et l'élément enfant semble collabs

Question

Salutations

je problème serius, je dois déplacer dans div div dans une div, mais il ne fonctionne pas. Ma question est de savoir s'il ne pourrait pas y avoir quelques problèmes avec des marges négatives ou un élément enfant de l'élément avec un problème de marge.

Il semble que la marge négative s'effondre avec une marge positive dans l'élément enfant.

La marge de l'élément enfant est en déplacement élément parrent.

here is fiddle de mon problème.

Ce que je veux réaliser est que:

a. Article div chevauche la rubrique principale, j'ai essayé d'éviter d'utiliser la position absolue, alors je suis allé pour la marge négative.

b. Le texte est en marge d'un article div. De haut.

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

ici aussi est une partie de problème dans css:

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

Comme je l'ai dit, la marge de l'élément de texte semble se déplacer élément de l'article de haut ainsi. C'est moi ou où est le problème, et quelle est la solution ou workaraund? De préférence, même sans position absolue, mais si vous avez vraiment besoin de les utiliser, ne vous inquiétez pas, mais effacez-le d'une manière ou d'une autre afin qu'il puisse être utilisé dans la colonne et ne pas interagir avec le contenu haut/bas.

Merci verry beaucoup pour votre temps

modifier:picture of what I want to achieve

Ce rectangle noir est emballage, chat est l'article texte est un texte, mais les marges se déplacer d'un article entier maintenant.

Answer 1

J'ai trouvé un Toppic lié à ce sujet, il arrive dans tous les navigateurs les plus courants, et il y a une solution simple à cela. Il est indispensable d'utiliser overflow attribut CSS ...

je

overflow: auto; 

sur l'élément Parrent, et cela a fonctionné.

Answer 2

Sur la base de votre commentaire et ce que je pense que vous vous demandez:

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

VIOLON:

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