css - Why div not stacked immediately after previous div ? (not margin/padding issue) -
i have positioned <div id="title"> 50px above original position, height of div being 70px. cant understand why <div id="page1"> not beginning right after title div, beginning after original height, 70px. how can correct it?
* { margin: 0; padding: 0; } #title { position: relative; top: -50px; width: 100%; height: 70px; background-color: blue; } #page1 { background-color: lightgreen; text-align: center; position: relative; z-index: 0; width: 100%; height: 500px; } #page1 img { position: absolute; top: 200px; left: 50px; width: 200px; } #page1 h1 { padding-top: 100px; } #page2 { background-color: red; position: relative; z-index: 1; width: 100%; height:800px; }<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <div id = "title"></div> <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> <div id = "page2"><div> <script src = "script.js"></script> </body> </html>
using position relative , top attributes problem here.
by stating top: -50px div being visually moved original position div still retaining original position in document flow
you use margin-top -50px instead of top. moves entire div , retains spacing betweens divs.
see docs below "top" property explanation. https://developer.mozilla.org/en/docs/web/css/top
tl:dr
for relatively positioned elements (those position: relative) value specified move element below or above position in normal flow if wasn't positioned.
Comments
Post a Comment