如何正確保留其父視圖中包含的HTML元素？

我的網頁分成幾個部分，每個部分都有h1標題。我已將文字放置在每個看起來合適的部分的頂部，但是當我將窗口/屏幕大小縮放到某個特定點時，文本會浮動並重疊上一個部分，如下所示：如何正確保留其父視圖中包含的HTML元素？

BEFORE規模突破點

後規模突破點

正如您所看到的那樣，文字會在特定比例點之後浮動到透明部分。這是我的HTML：

<body> 
     <div class="first-section"> 
     <h1> 
      Dark,Darker,Darkest... Darker than Darkest... Darkest-est, whatever you get the point. 
     </h1> 
     </div> 
     <div class="second-section"> 
     <h1> 
      You must be looking at this guy, really weirded out... Well guess what, so is he. 
     </h1> 
     </div> 
     <div class="third-section"> 

     </div> 
     <div class="fourth-section"> 

     </div> 
    </body>

這裏是我的CSS：

/* Sections */ 

.first-section { 
    position: relative; 
    height: 100vh; 
    background-color: #6666FF; 
    background-image: url(https://s3-us-west-2.amazonaws.com/assets/hallway.jpg); 
    background-position: center; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-shadow: 0 1px 3px rgba(0,0,0,.8); 
    text-align: center; 
    position:relative; 
} 
.first-section h1 { 
    position: relative; 
    color: #FFD700; 
    font-size : 6vw; 
    margin: auto; 
    top: -200px; 

} 
.second-section { 
    position: relative; 
    height: 100vh; 
    background-color: honeydew; 
    background-image: url(https://s3-us-west-2.amazonaws.com/assets/awe.jpg); 
    background-position: center; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-shadow: 0 1px 3px rgba(0,0,0,.8); 
    text-align: center; 
    position:relative; 
} 
.second-section h1 { 
    position: relative; 
    color: #FFD700; 
    font-size : 6vw; 
    margin: auto; 
    top: -200px; 
}

如何阻止上浮了其父段的文本？

來源

2016-02-10 John Durand

這是因爲你的頂部：-200px; ...你正在將你的h1文本排除在div之外。

你能提供一個完整的例子嗎？你想要達到什麼目的？

來源

2016-02-10 09:04:47

是的，我知道，我只做到這一點，因爲我希望把文本上漲的部分，它在中間嫌，和我有更多的文本添加..和只是看在問題的圖像。我不希望文本浮起來，並重疊前一節，當我縮小窗口。 –

改變你的頭版頭條的CSS來：

.second-section h1 { 
    position: absolute; 
    color: #FFD700; 
    font-size : 6vw; 
    margin: auto; 
    top: 0; 
    left: 0; 
}

然後它會永遠在父div的左上位置。

來源

2016-02-12 10:44:16

如何正確保留其父視圖中包含的HTML元素？

回答

相關問題