内容坚持div，不在底部

Question

我试图让#tech跟在蓝色箭头之后，但是它们仍然坚持另一个div，并且位置：绝对和底部：0 /位置：相对和底部：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>