Ir ao conteúdo
  • Cadastre-se
Gustavo Augusto Lopes

CSS Position Fixed não funciona

Posts recomendados

Direto ao ponto,

Estou desenvolvendo uma página apenas para estudo, e decidi colocar um botão fixo na parte inferior direita da pagina, daqueles onde se clica para voltar ao topo da página, mas quando monto ele e dou um position:fixed, ele simplesmente some. Testei o position:fixed em alguns elementos e notei que nenhum fica fixo na tela.

 

O botão se encontra no fim do HTML com id="scrollTop" e do CSS

 

Segue o código:

 

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!--BOOTSTRAP.CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rocket Apps</title>
    <link rel="stylesheet" href="css/home.css">
</head>

<body>
    <div>

        <div id="cabecalho">
            <ul class="list-group list-group-horizontal">
                <li class="list-group-item" style="margin-left: -100px;">
                   <a href="#"><h4>Home</h4></a> 
                </li>
                <li class="list-group-item" style="margin-left: 100px;">
                    <a href="#"><h4>Produtos</h4></a> 
                </li>
                <img style="margin-left: 100px;" src="imgs/logo.png" id="fogueteTop" onclick="fogueteClick()"
                    class="animate__animated animate__fadeInBottomLeft animate__slow">
                <li class="list-group-item" style="margin-left: 100px;">
                    <center>
                        <a href="#"><h4>Trabalhe Conosco</h4></a> 
                    </center>
                </li>
                <li class="list-group-item" style="margin-left: 100px;">
                    <a href="#"><h4>Contato</h4></a> 
                </li>
            </ul>
        </div>


        <div id="content" class="animate__animated animate__fadeInLeft">
            <div id="slogan">
                <h2>
                    Trabalhamos com<br><span>experiências</span> que <br> alavancam negócios
                </h2>
                <small class="detail">Somos uma empresa de inovação digital e desenvolvimento de
                    software que impulsionará o crescimento do seu negócio</small>
                <div class="info-footer">
                    <a id="btnContato" href="#" onmouseenter="btnEnter()" onmouseout="btnOut()"
                        class="btn contact animate__pulse animate__infinite" style="color: #7a1be6;">Entre em Contato conosco</a>
                    <a href="#" class="about">Leia sobre nós ></a>
                </div>
            </div>


        </div>
        <div id="logo-right">
            <img src="imgs/logo-right.png" class="animate__animated animate__fadeInBottomLeft animate__slow">
        </div>


        <div id="missaovisaovalores">
            <div class="container">
                <ul>
                    <li>
                        <i>
                            <img src="imgs/missao.png" alt="">
                        </i>
                        <h3>Missao</h3>
                        <p>Proporcionar aos pequenos empreendedores a possibilidade de engajar no mundo do Ecommerce e
                            crescer seu negócio muito além do esperado.</p>
                    </li>

                    <li>
                        <i>
                            <img src="imgs/visao.png" alt="">
                        </i>
                        <h3>Visão</h3>
                        <p>Ser a opção preferida dos micro-empreendedores que buscam a expansão do seu comércio, com o
                            melhor custo benefício de todas as alternativas.</p>
                    </li>

                    <li>
                        <i>
                            <img src="imgs/valores.png" alt="">
                        </i>
                        <h3>Valores</h3>
                        <p>Pontualidade junto com qualidade é o foco do nosso negócio, buscamos solucionar os problemas
                            dos nossos clientes sem perder a qualidade de atendimento e do produto.</p>
                    </li>
                </ul>
            </div>
        </div>

        <div id="produtos">
            <div id="container">
                
            </div>
        </div>

        <br><br><br><br><br><br><br><br>
        <footer id="rodape">
            <div class="rodapeContent">
                <div class="logo">
                    <img src="imgs/logo.png" alt="">
                </div>

                <div class="rodapeEmail">
                    <br>
                    <h5>Início</h5><br>
                    <p>Home</p>
                    <p>Produtos</p>
                </div>

                <div class="rodapeSobre">
                    <br>
                    <h5>Sobre Nós</h5><br>
                    <p>Empresa</p>
                    <p>Contato</p>
                </div>

                <div class="rodape">

                </div>
            </div>
        </footer>

    </div>
    <div id="scrollTop">
        <a href="#"><button>^</button></a>
    </div>

    <!--JS Bootstrap-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

    <script src="js/home.js"></script>
</body>

</html>

css

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    background-color: transparent;
    background-image: url('/imgs/bg-home.jpg');
    background-repeat: no-repeat;
    background-position: 0% -100px;
    background-size: 120% 1000px;
}
/*LINKS*/
a{color: inherit}
a:link{text-decoration: none;color: inherit}
a:visited{text-decoration: none;color: inherit}
a:hover{text-decoration: none;color: inherit}
a:active{text-decoration: none;color: #9a6bcf;text-decoration:none;}
/*Cabecalho*/
#cabecalho{
    color: #9a6bcf;
    margin-top: 30px;
    height: 60px;
    font-family: 'Oswald', sans-serif;
}
#cabecalho ul {

    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

#cabecalho ul li{

    border: none;
    background-color: transparent;
}

#cabecalho img{
    width: 100px;
    height: 100px;
    margin-top: -20px;
}


/*CONTENT*/

/*Slogan*/
div{
    display: block;
}

#content{
    margin: 100px;
    color: white;
}
#slogan{
    float: left;
    max-width: 480px;
}

#slogan h2{
    text-align: justify;
    font-size: 2.8rem;
    font-family: 'Titillium Web', sans-serif;
}
#slogan span{
    color: #8c57c9;
}

#slogan a{
    margin: 0;

}
.info-footer{
    margin-top: 40px;
}

.info-footer .about{
    padding-left: 25px;
    color:#c4a7e6;
    font-family: 'Titillium Web', sans-serif;
    margin-left: 5px;
    letter-spacing: 1.2px;
}
.detail{
    text-align: center;
    font-size: 1.1rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color:#c4a7e6
}
.contact{
    margin-top: 25px;
    height: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    background-color: white;
    color: #7a1be6;

}

/*Logo Direita*/
#logo-right{
    margin-top:-80px;
    float: right;
}
#logo-right img{
    width: 500px;
    height: 500px;
}

/*Missao Visao Valores*/
#missaovisaovalores{

    background-color: white;
    width: 100%;
    bottom: 0;
    height: 500px;
    margin-top: 100vh;

}
#missaovisaovalores .container{
    margin-top: 0;
    position: relative;
    top: 50%;

    transform: translate(0, -50%);

}
#missaovisaovalores ul{
    top: 0;

}

#missaovisaovalores ul li {
    position: relative;
    text-align: center;
    display: inline-block;
    height: 230px;
    max-width: 230px;
    margin-left: 8%;
}
#missaovisaovalores p{
    text-align: center;
    font-size: 0.75rem;
}

/*Produtos*/
#produtos{
    background-color: red;
    width: 100%;
    height: 500px;
}





/*RODAPE*/
#rodape{
    position: absolute;
    bottom: 0;
    min-height: 200px;
    background-color: #2e2e2e;
    color: white;    
    position: relative;
}

#rodape .rodapeContent{
    margin: 20px;
}

#rodape .logo img{
    margin-top: 30px;
    margin-left: 100px;
    width: 150px;
    height: 150px;
    float: left;
}

#rodape .rodapeEmail{
    width: 15%;
    float: left;
    margin-left: 200px;
}
#rodape p{
margin-top: -15px
}




/*Scroll Top*/
#scrollTop{

    position: absolute;

    left: 90%;
}
#scrollTop a{
    position: fixed;
    padding-top: -50px;
    width: 50px;
    height: 50px;
    text-decoration: none;
    background-color: green;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você tem que colocar o position fixed no #scrollTop não na tag a.

Também que setar no css o bottom e o z-index.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!