内容坚持div,不在底部

时间:2017-12-26 12:50:37

标签: html css

我试图让#tech继续蓝色箭头,但他们继续坚持另一个div,并且位置:绝对&底部:0 /位置:相对&底部:0对它们没有任何影响。

我已经考虑过在中央移动向下滚动div,也许这应该会有所帮助。 如何将h6 .techie文本粘贴到#tech?

的底部

Close
Customize

enter image description here

1 个答案:

答案 0 :(得分:1)

postion:relative应用于父级#tech,然后将position:absolute添加到.techie。在此之后,.techie将不会显示div的底部,因为浏览器提供了margin添加的默认css。所以这被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>
&#13;
&#13;
&#13;