Question 112258 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Position of a container

I have a container that I want to leave fixed on the page, to follow the scrolling of the page,
so i put position:relative, and it worked as i wanted,
but now i just made the page footer and the container overlaps the footer when i scroll the page to the end, i read that using position: sticky maybe solves the problem, but when I use the sticky property it just doesn’t work. So if someone help me find a solution to solve this either using sticky or javascript, I would be very grateful.

/* Gerais */

* {
    font-family: 'League Spartan', sans-serif;
}

html,body {
    overflow-x: hidden;
}

body {
    background-color:  #545454;
    color: #FFFFFF;
}

.primary-bg-color {
    background-color: #545454;
}

.secondary-bg-color {
    background-color: #46484B;
}

.btn-primary {
    background-color: transparent;
    border-color: #FFC85D;
    color: #FFFFFF;
    font-size: 1rem;
    height: auto;
    transition: .5s;
    width: auto;
}

.btn-primary:hover {
    background-color: #FFC85D;
    border-color: #FFC85D;
}

.btn-secondary {
    background-color: #FFC85D;
    color: #1E1E1E;
    font-size: 1.5rem;
    transition: .5s;
    width: 20rem;
}

.btn-secondary:hover {
    background-color: #EDC77A;
    border-color: #EDC77A;
    color: #FFFFFF;
}

/* Navbar */

#navbar {
    background-color: #1E1E1E;
}

.logo {
    align-items: center;
    display: flex;
    justify-content: center;
}

.navbar-brand { 
    font-weight: 700;
    margin: 0;
}

#logo-img {
    height: 6rem;
    width: auto;
}

#navbar-items {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-width: 80%;
}

#navbar .navbar-nav {
    align-items: center;
    flex-direction: row;
}

#navbar .navbar-nav li {
    margin-left: 1rem;
    position: relative;
}

#navbar .nav-link {
    display: flex;
}

#navbar .nav-link i {
    color: #FFC85D;
    font-size: 30px;
    margin-left: .5rem;
}

#navbar .nav-link .bi-person-circle {
    font-size: 60px;
}

#navbar a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: .5s;
}

#navbar a:hover {
    color: #FFC85D;
}

#search-form, #news-form {
    align-items: center;
    border-radius: 3px;
    border: 2px solid #626262;
    display: flex;
    height: 3.5rem;
    justify-content: center;
    margin: 0;
    padding: 5px 15px;
    width: 40%;
}

#search-form i, #news-form i { 
    color: #FFC85D;
    font-size: 20px;
}

#search-form input, #news-form input {
    background-color: transparent;
    border: none;
    color: #FFFFFF;
}

#search-form input:focus, #news-form input:focus{
    box-shadow: none;
}

#search-form input::placeholder, #news-form input::placeholder {
    color: #FFFFFF;
}

/* Jogos */

.container-fluid h1 {
    font-size: 4rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Carousel */

.carousel-indicators {
    bottom: 1rem;
    position: absolute;
}

.carousel-control-prev {
    height: 80%;
}

.carousel-control-next {
    height: 80%;
}

/* Sobre */

.container-fluid h2 {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
}

.container-fluid p {
    font-size: 2rem;
}

/* Especificações */

#windows, #linux, #macos {
    display: none;
}

#especificacoes img {
    height: 1rem;
    margin-right: .5rem;
}

#especificacoes nav {
    height: 50px;
    position: relative;
    width: 100%;
}

#especificacoes nav .slider {
    background-color: #46484B;
    border-radius: 5px;
    bottom: 0%;
    height: 100%;
    left: 0%;
    position: absolute;
    transition: all 0.3s ease;
    width: 33.33%;
    z-index: 0;
}

#especificacoes label {
    align-items: center;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    font-size: 1.5rem;
    height: 100%;
    justify-content: center;
    line-height: 50px;
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    z-index: 1;
}

#linux:checked ~ nav .slider {
    left: 33.33%;
}

#macos:checked ~ nav .slider {
    left: 66.66%
}

.content {
    display: none;
}

.content span {
    color: #1E1E1E;
}

#windows:checked ~ section .content-1, #linux:checked ~ section .content-2, #macos:checked ~ section .content-3 {
    display: block;
}

.especificacoes-min {
    border-right: 2.5px solid #1E1E1E;
    padding: 1rem;
}

.especificacoes-rec {
    border-left: 2.5px solid #1E1E1E;
    padding: 1rem;
}

/* Infos */

.right {
    right: 0;
    height: fit-content;
}

.container-fluid h3 {
    border-bottom: 5px solid #1E1E1E;
    font-size: 3rem;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
}

.jogos {
    align-items: center;
    padding: 0;
}

.jogo {
    width: auto;
}

.jogo img {
    height: auto;
    width: auto;
    position: relative;
}

.jogo p {
    align-items: center;
    background-color: #A5C400;
    border-radius: .5rem;
    color: #1E1E1E;
    display: flex;
    height: 3rem;
    justify-content: center;
    margin-bottom: 0;
    margin-left: auto;
    margin-top: -3rem;
    width: 3rem;
    z-index: 1;
}

.infos {
    border-radius: 5px;
    padding: 1rem;
}

.infos p {
    font-size: 1.5rem;
    margin-bottom: 0;
    margin-left: .5rem;
    margin-right: .5rem;
}

.infos img {
    height: 2rem;
    margin-left: .5rem;
    margin-right: .5rem;
    width: 2rem;
}

/* Footer */

#footer-links-container {
    border-bottom: 1px solid #FFC85D;
}

#footer .footer-column {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

#footer-left, #footer-center, #footer-right {
    border-top: 1px solid #FFC85D;
}

#footer-center {
    border-left: 1px solid #FFC85D;
    border-right: 1px solid #FFC85D;
}

#footer .footer-column {
    padding: 2rem;
}

#footer-links-container h3 {
    font-weight: 900;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: 0;
}

#footer-links-container li {
    font-size: 1rem;
    text-align: center;
}

#footer-links-container a {
    color: #FFFFFF;
    text-decoration: none;
    transition: .5s;
    font-size: 1.5rem;
}

#footer-links-container a:hover {
    color: #FFC85D;
}

#newsletter-container {
    background-color: #1E1E1E;
    border-bottom: 1px solid #FFC85D;
    padding: 20px;
    text-align: center;
}

#news-form {
    margin: 15px auto;
    max-width: 600px;
}

#news-form i {
    font-size: 1.5rem;
}

#news-form .btn {
    color: #FFFFFF;
}

#social-container {
    margin: 20px auto;
}

#social-container i {
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.5rem;
    margin: 10px;
    transition: .5s;
}

#social-container i:hover {
    color: #FFC85D;
}

#copy-container {
    padding: 30px;
    text-align: center;
}

#copy-container p {
    font-size: 1.5rem;
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 1rem;
}
  
::-webkit-scrollbar-thumb {
    background: #1E1E1E;
    border-radius: 4rem;
}
  
::-webkit-scrollbar-track {
    background-color: #FFC85D;
}

/* Responsividade */

@media (max-width: 1300px) {

    .logo {
        flex-direction: column;
        margin-right: .5rem;
    }

    #logo-img, .navbar-brand {
        margin: 0;
    }
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogos</title>
    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg py-2 px-2" id="navbar">
            <div class="container-fluid px-0">
                <div class="logo">
                    <a href="" class="navbar-brand">
                        <img src="/img/logo.png" alt="" id="logo-img">
                    </a>
                </div>
                <div id="navbar-items">
                    <form class="d-flex" id="search-form">
                        <i class="bi bi-search primary-color"></i>
                        <input type="search" class="form-control me-2" placeholder="Digite aqui a sua pesquisa..." aria-label="Search">
                        <button class="btn btn-primary" type="submit">Pesquisar</button>
                    </form>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="" class="nav-link ">Comunidade<i class="bi bi-chat"></i></a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">Devs<i class="bi bi-lightbulb"></i></a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">Games<i class="bi bi-controller"></i></a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link"><i class="bi bi-person-circle"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="container-fluid d-flex mt-4 mb-4">
            <div class="container-fluid col-7 m-0">
                <h1 class="mb-4">Enter the Gungeon</h1>
                <div class="col-10">
                    <div id="carousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button class="active" type="button" data-bs-target="#carousel" data-bs-slide-to="0" aria-current="true" aria-label="slide 1"></button>
                            <button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-current="true" aria-label="slide 2"></button>
                            <button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-current="true" aria-label="slide 3"></button>
                            <button type="button" data-bs-target="#carousel" data-bs-slide-to="3" aria-current="true" aria-label="slide 4"></button>
                            <button type="button" data-bs-target="#carousel" data-bs-slide-to="4" aria-current="true" aria-label="slide 5"></button>
                            <button type="button" data-bs-target="#carousel" data-bs-slide-to="5" aria-current="true" aria-label="slide 6"></button>
                        </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <video src="/img/slider1.webm" type="video/webm" alt="" class="d-block w-100" autoplay muted controls></video>
                            </div>
                            <div class="carousel-item">
                                <img src="/img/slider2.png" alt="" class="d-block w-100">
                            </div>
                            <div class="carousel-item">
                                <img src="/img/slider3.png" alt="" class="d-block w-100">
                            </div>
                            <div class="carousel-item">
                                <img src="/img/slider4.png" alt="" class="d-block w-100">
                            </div>
                            <div class="carousel-item">
                                <img src="/img/slider5.png" alt="" class="d-block w-100">
                            </div>
                            <div class="carousel-item">
                                <img src="/img/slider6.png" alt="" class="d-block w-100">
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="mt-4 mb-4">
                        <h2>Sobre esse jogo</h2>
                        <p>Enter the Gungeon é uma aventura em um labirinto com armas de fogo, na qual um bando de desajustados arrependidos terá que atirar, saquear, se esquivar e virar mesas, em busca da absolvição pessoal, chegando ao lendário tesouro final do Balabirinto: a arma que mata o passado.</p>
                    </div>
                    <div class="container-fluid mt-4 mb-4" id="especificacoes">
                        <h3>Especificações</h3>
                        <input type="radio" name="slider" checked id="windows">
                        <input type="radio" name="slider" id="linux">
                        <input type="radio" name="slider" id="macos">
                        <nav class="d-flex mb-4">
                            <label for="windows" class="windows"><img src="/img/plataforma1.png" alt="">Windows</label>
                            <label for="linux" class="linux"><img src="/img/plataforma2.png" alt="">Linux</label>
                            <label for="macos" class="macos"><img src="/img/plataforma3.png" alt="">MacOS</label>
                            <div class="slider"></div>
                        </nav>
                        <section>
                            <div class="content content-1">
                                <ul class="list-unstyled d-flex">
                                    <li class="especificacoes-min">
                                        <p>Mínimos:</p>
                                        <p><span>SO:</span> Windows 7 ou posterior</p>
                                        <p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
                                        <p><span>Memória:</span> 2GB de RAM</p>
                                        <p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
                                        <p><span>Armazenamento:</span> 2GB de espaço disponível</p>
                                    </li>
                                    <li class="especificacoes-rec">
                                        <p>Recomendados:</p>
                                        <p><span>SO:</span> Windows 7 ou posterior</p>
                                        <p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
                                        <p><span>Memória:</span> 2GB de RAM</p>
                                        <p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
                                        <p><span>Armazenamento:</span> 2GB de espaço disponível</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="content content-2">
                                <ul class="list-unstyled d-flex">
                                    <li class="especificacoes-min">
                                        <p>Mínimos:</p>
                                        <p><span>SO:</span> Ubuntu 12.04 ou posterior</p>
                                        <p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
                                        <p><span>Memória:</span> 2GB de RAM</p>
                                        <p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
                                        <p><span>Armazenamento:</span> 2GB de espaço disponível</p>
                                    </li>
                                    <li class="especificacoes-rec">
                                        <p>Recomendados:</p>
                                        <p><span>SO:</span> Ubuntu 12.04 ou posterior</p>
                                        <p><span>Processador:</span> Intel Core 2 Duo E6320 (2*1866) ou equivalente</p>
                                        <p><span>Memória:</span> 2GB de RAM</p>
                                        <p><span>Placa de vídeo:</span> GeForce 7600 GS (512 MB) ou equivalente</p>
                                        <p><span>Armazenamento:</span> 2GB de espaço disponível</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="content content-3">
                                <ul class="list-unstyled d-flex">
                                    <li class="especificacoes-min">
                                        <p>Mínimos:</p>
                                        <p><span>SO:</span> OS 10.6 ou posterior</p>
                                        <p><span>Memória:</span> 2GB de RAM</p>
                                        <p><span>Armazenamento:</span> 2GB de espaço disponível</p>
                                    </li>
                                    <li class="especificacoes-rec">
                                        <p>Recomendados:</p>
                                        <p><span>SO:</span> OS 10.6 ou posterior</p>
                                        <p><span>Memória:</span> 2GB de RAM</p>
                                        <p><span>Armazenamento:</span> 2GB de espaço disponível</p>
                                    </li>
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
            <! -- Container -->
            <div class="container-fluid col-5 d-flex flex-column justify-content-center position-fixed right">
                <div class="row d-flex flex-column m-2">
                    <div class="col d-flex flex-column jogos mb-4">
                        <div class="col d-flex flex-column jogo">
                            <img src="/img/jogo.jpg" alt="" class="img-fluid">
                            <p>7+</p>
                        </div>
                    </div>
                    <div class="col d-flex justify-content-between secondary-bg-color mb-2 infos"><p>Desenvolvedor</p><p>Dogge Roll</p></div>
                    <div class="col d-flex justify-content-between secondary-bg-color mb-2 infos"><p>Destribuidora</p><p>Devolver Digital</p></div>
                    <div class="col d-flex justify-content-between secondary-bg-color mb-2 infos"><p>Data de Lançamento</p><p>05/Abr./2016</p></div>
                    <div class="col d-flex justify-content-between secondary-bg-color mb-4 infos">
                        <p>Plataformas</p>
                        <div>
                            <p>
                                <img src="/img/plataforma1.png" alt=""><img src="/img/plataforma2.png" alt=""><img src="/img/plataforma3.png" alt="">
                            </p>
                        </div>
                    </div>
                    <div class="col d-flex justify-content-center">
                        <button class="btn btn-secondary">Jogar</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="container-fluid" id="footer-links-container">
            <div class="row">
                <div class="col-12 col-md-4 footer-column" id="footer-left">
                    <h3>Rmax</h3>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="">Blog</a></li>
                        <li class="mb-2"><a href="">Diretizes do Site</a></li>
                        <li class="mb-2"><a href="">Sobre Nós</a></li>
                    </ul>
                </div>
                <div class="col-12 col-md-4 footer-column" id="footer-center">
                    <h3>Informações</h3>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="">Politíca de Cookies</a></li>
                        <li class="mb-2"><a href="">Politíca de Privacidade</a></li>
                        <li class="mb-2"><a href="">Termos e Condições</a></li>
                    </ul>
                </div>
                <div class="col-12 col-md-4 footer-column" id="footer-right">
                    <h3>Para desenvolvedores</h3>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="">Ajude Desenvolvedores</a></li>
                        <li class="mb-2"><a href="">APIs de Games</a></li>
                        <li class="mb-2"><a href="">Programa de Parceria</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container-fluid" id="newsletter-container">
            <div class="col-12">
                <div class="row">
                    <p>Se inscreva na nossa Newletter:</p>
                    <form class="d-flex" id="news-form">
                        <i class="bi bi-envelope primary-color"></i>
                        <input type="email" class="form-control me-2" placeholder="Insira o seu E-mail">
                        <button class="btn btn-primary" type="submit">Enviar</button>
                    </form>
                </div>
            </div>
            <div class="col-12" id="social-container">
                <i class="bi bi-github"></i>
                <i class="bi bi-instagram"></i>
                <i class="bi bi-youtube"></i>
            </div>
        </div>
        <div class="container" id="copy-container">
            <p>Copyright © 2022 | Rmax. Todos os direitos reservados</p>
        </div>
    </footer>
</body>
</html>

I left a comment where the container’s HTML starts, and the CSS of the container is in the part of /* Infos */

Z-index works but it gets a little weird enter image description here

it would be perfect if the container arrived at the footer and stopped moving, I think it could be done with JS but I have no idea how
enter image description here

Tags:

2

Answers


  1. 0

    If you want your sticky menu hides under your footer (not overlapping it)
    use this code for your footer

    {
    position: relative;
    z-index: 1;
    background: #fff;
}
    Login or Signup to reply.
  2. 0

    Stick the container into viewport using:

    .target-container {
  position: sticky;
  
  //This is the offset from the top of the screen. Change it accordingly.
  top: 2rem;
}

    Note that:

    html, body {
  overflow-x: hidden;
}

    will prevent position: sticky from working.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search