Parrent元素陰性切緣和子元素似乎的協作者

我有serius問題，我需要在DIV移動格在一個div，但它不工作。我的問題是，如果不存在負邊距或邊緣問題元素的子元素的問題。

看起來負邊緣在子元素中具有正邊緣的倒塌。

子元素的邊距是移動元素。

我想達到的是：

a。文章是重疊主標題，我試圖避免使用絕對位置，所以我去了負邊距。

b。文本在文章div中保留。從頂部。

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

另外這裏的一些問題，在CSS：

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

正如我所說的，文本元素的保證金的舉動似乎從頂部文章元素爲好。這是我的問題或者問題在哪裏，解決方案或工作原理是什麼？最好是即使沒有絕對的位置，但如果你確實需要使用它們，不要擔心，但要以某種方式清除它，以便它可以用作列的一部分，並且不會與上/下內容交互。

謝謝檸太多的寶貴時間

編輯：picture of what I want to achieve

這黑色矩形包裝，貓文章文字是文字，但利潤率現在移動整篇文章。

來源

2017-06-01 Yuri Nko

不知道我理解你的問題或問題。是否有必要有div> div> div？爲什麼不能有div + div + div？ – Tom

你能畫出你想要達到的目標嗎？ –

@tom這將成爲圖片背景。文章和文字需要懸停在它上面。 –

我發現了一個相關toppic這一點，它發生在所有的市長瀏覽器，並有一個簡單的解決方案。還有就是使用CSS屬性overflow ...

一絕我用

overflow: auto;

在parrent元素，和它的工作。

來源

2017-06-01 20:59:41

基於您的評論什麼，我想你問：

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

來源

2017-06-01 20:44:32 Tom

不是這樣的，肯定地，我添加了照片，所以你可以看到。 –

你想把標題放在容器外面一半？ – Tom

Parrent元素陰性切緣和子元素似乎的協作者

回答

相關問題