爲什麼div不能在之前的div之後立即堆疊？（不包括邊距/填充問題）

我已經將<div id="title">定位在比原始位置高50px的位置，div的高度爲70px。我不明白爲什麼<div id="page1">不是在標題div後面開始，而是僅在其原始高度70px後開始。我該如何糾正它？爲什麼div不能在之前的div之後立即堆疊？（不包括邊距/填充問題）

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
#title { 
 
\t position: relative; 
 
\t top: -50px; 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t background-color: blue; 
 
} 
 
#page1 { 
 
    background-color: lightgreen; 
 
\t text-align: center; 
 
\t position: relative; 
 
\t z-index: 0; 
 
\t width: 100%; 
 
\t height: 500px; 
 
} 
 
#page1 img { 
 
\t position: absolute; 
 
\t top: 200px; 
 
\t left: 50px; 
 
\t width: 200px; 
 
} 
 
#page1 h1 { 
 
\t padding-top: 100px; 
 
} 
 
#page2 { 
 
\t background-color: red; 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t width: 100%; 
 
\t height:800px; 
 
}

<html> 
 
    <head> 
 
\t  <link rel = "stylesheet" href = "style.css"> 
 
\t </head> 
 
\t <body> 
 
\t  <div id = "title"></div> 
 
\t  <div id = "page1"><h1>Hello !!!</h1><img src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"></div> 
 
\t  <div id = "page2"><div> 
 
\t \t <script src = "script.js"></script> 
 
    </body> 
 
</html>

來源

2016-06-29 Dhruv Chadha

因爲那是我們的方式相對定位的作品。 - http://codepen.io/Paulie-D/pen/IuLfJ頁面會記住元素的位置，並像該元素仍然存在一樣分配該空間。 –

使用position relative和top屬性是這裏的問題。

通過聲明頂部：-50px股利是在視覺上從原來的位置。然而在div仍保留在文件中的原始位置流

你可以使用的margin-top -50px，而不是僅僅頂部移動。這會移動整個div並保留divs之間的間距。

有關「top」屬性說明，請參閱下面的文檔。 https://developer.mozilla.org/en/docs/Web/CSS/top

TL：DR

對於相對定位元素（具有位置：相對）指定將在元件移動低於或高於其在正常流動位置，如果它是不位於值。

來源

2016-06-29 09:40:53

是否影響元素的高度，我的意思是，如果視覺上50px高度的div向下移動10px，相對於其原始位置，它會顯示高度爲60px？ @MatthewTilley –

@DruveChadha - 它只會將目標元素向下移動10px。它對元素的尺寸沒有影響，只有位置。 –

它是由頂引起的：-50px和位置相對;

您可以實現它將margin-top：-50px添加到#title div並從其刪除頂部：-50px。

#title { 
    position: relative; 
    margin-top: -50px; 
    width: 100%; 
    height: 70px; 
    background-color: blue; 
}

來源

2016-06-29 09:35:19

您面臨的意外行爲是由使用position:relative引起的。

爲了更好地理解如何相關工作，我會建議您閱讀以下文章：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

在特定情況下，你可以使用position:absolute，而不是相對的。你可以通過這種方式實現你的結果，但以一種簡單的方式。

#title { 
 
    position: absolute; 
 
    top: 0x; 
 
    width: 100%; 
 
    height: 70px; 
 
    background-color: blue; 
 
} 
 

 
#page1 { 
 
    position: absolute; 
 
    top: 70px; 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: lightgreen; 
 
} 
 

 
#page2 { 
 
    position: absolute; 
 
    top: 500px; 
 
    width: 100%; 
 
    height: 800px; 
 
    background-color: yellow; 
 
}

<div id="title">Title</div> 
 
<div id="page1"> 
 
Page1 
 
    <div> 
 
    <div id="page2"> 
 
    Page2 
 
     <div>

如果要使用位置貼：相對於您可以修復你的代碼中添加該代碼。

例子：https://jsfiddle.net/yn8337hy/2/

#title { 
    margin-top: -50px; 
    position: relative; 
    width: 100%; 
    height: 70px; 
    background-color: blue; 
}

來源

2016-06-29 09:51:25 GibboK

爲什麼div不能在之前的div之後立即堆疊？ （不包括邊距/填充問題）

回答

相關問題

爲什麼div不能在之前的div之後立即堆疊？（不包括邊距/填充問題）