内容坚持div，不在底部

Question

我正在尝试让#tech追随蓝色箭头，但它们一直紧贴另一个div，而position：absolute＆bottom：0 / position：relative＆bottom：0对它们没有任何影响。

我曾考虑过将向下滚动div移到中央一个，也许应该会有所帮助。 如何使h6 .techie文本停留在#tech的底部？

 #central { margin-top: 11vw; font-family: 'Roboto Condensed', sans-serif; user-select: none; position: relative; display: table; width: 100%; } #intro-wrap { display: table-cell; vertical-align: middle; max-width: 710px; width: 100%; } #intro { text-transform: uppercase; color: #77dff1; font-size: 300px; text-align: center; } .intro { font-size: 24px; text-align: center; margin: 0 auto; max-width: 710px; line-height: 35px; color: #eeede7; } /*Buton MORE*/ #button-wrap { postion:relative; text-align:center; margin-top: 2.5vw; } #more { font-family: 'Proxima Nova'; font-weight: 600; background-color: transparent; text-align: center; text-decoration: none; font-size: 2.5rem; color: #fff; cursor: pointer; border: 2px solid #77dff1; padding: 15px; margin: 0 auto; } #more:hover { font-weight: 100; color: #00000f; background: #77dff1; } /*Scroll*/ #scroll-down { font-size: 20px; color: #77dff1; width: 100%; text-align: center; position: absolute; bottom: 0; } .stanga { float:left; margin-left: 1vw; } .dreapta { float: right; margin-right: 1vw; } /*scroll / jos*/ #scroll { max-width: 100%; } #tech { width: 100%; height: 500px; text-align: center; } #tech > .fa-3x { padding: 10px; } .techie { width: 100%; bottom: 0; font-size: 50px; } 

 <div id="central"> <div id="intro-wrap"> <h1 id="intro">hi</h1> <h6 class="intro">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6> <div id="button-wrap"> <button type="button" id="more">Learn more</button> </div> </div> </div> <div id="scroll-down"> <i class="fa fa-angle-down stanga" aria-hidden="true"></i> <i class="fa fa-angle-down centru" aria-hidden="true"></i> <i class="fa fa-angle-down dreapta" aria-hidden="true"></i> </div> <div id="scroll"> <div id="tech"> <i class="fa fa-television fa-3x" aria-hidden="true"></i> <i class="fa fa-laptop fa-3x" aria-hidden="true"></i> <i class="fa fa-desktop fa-3x" aria-hidden="true"></i> <i class="fa fa-mobile fa-3x" aria-hidden="true"></i> <i class="fa fa-gamepad fa-3x" aria-hidden="true"></i> <h6 class="techie">I consider myself a techie. I love all kinds of technology and I'm up to learn more.</h6> </div> 

Answer 1

应用postion:relative对于父级#tech，然后将position:absolute添加到.techie 。 之后，您的.techie将不会进入div的底部，因为浏览器给出了默认的CSS，即添加了margin 。 因此，将其替换为margin:0px 。

 #central { margin-top: 11vw; font-family: 'Roboto Condensed', sans-serif; user-select: none; position: relative; display: table; width: 100%; } #intro-wrap { display: table-cell; vertical-align: middle; max-width: 710px; width: 100%; } #intro { text-transform: uppercase; color: #77dff1; font-size: 300px; text-align: center; } .intro { font-size: 24px; text-align: center; margin: 0 auto; max-width: 710px; line-height: 35px; color: #eeede7; } /*Buton MORE*/ #button-wrap { postion:relative; text-align:center; margin-top: 2.5vw; } #more { font-family: 'Proxima Nova'; font-weight: 600; background-color: transparent; text-align: center; text-decoration: none; font-size: 2.5rem; color: #fff; cursor: pointer; border: 2px solid #77dff1; padding: 15px; margin: 0 auto; } #more:hover { font-weight: 100; color: #00000f; background: #77dff1; } /*Scroll*/ #scroll-down { font-size: 20px; color: #77dff1; width: 100%; text-align: center; position: absolute; bottom: 0; } .stanga { float:left; margin-left: 1vw; } .dreapta { float: right; margin-right: 1vw; } /*scroll / jos*/ #scroll { max-width: 100%; } #tech { width: 100%; height: 500px; text-align: center; position:relative; } #tech > .fa-3x { padding: 10px; } .techie { width: 100%; font-size: 50px; position:absolute; bottom: 0; margin:0px; } 

 <div id="central"> <div id="intro-wrap"> <h1 id="intro">hi</h1> <h6 class="intro">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6> <div id="button-wrap"> <button type="button" id="more">Learn more</button> </div> </div> </div> <div id="scroll-down"> <i class="fa fa-angle-down stanga" aria-hidden="true"></i> <i class="fa fa-angle-down centru" aria-hidden="true"></i> <i class="fa fa-angle-down dreapta" aria-hidden="true"></i> </div> <div id="scroll"> <div id="tech"> <i class="fa fa-television fa-3x" aria-hidden="true"></i> <i class="fa fa-laptop fa-3x" aria-hidden="true"></i> <i class="fa fa-desktop fa-3x" aria-hidden="true"></i> <i class="fa fa-mobile fa-3x" aria-hidden="true"></i> <i class="fa fa-gamepad fa-3x" aria-hidden="true"></i> <h6 class="techie">I consider myself a techie. I love all kinds of technology and I'm up to learn more.</h6> </div>