Question 42885 in Html Question posted in
Some basic documentation can be found here.

Divs wont overlap with both position relatives and top styles? – Html

I have a Navbar hamburger container and I have a text container.

this is the nav container:


.containerham{
    width: 100%;
    height: max-content;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    position: relative !important;
    z-index: 100 !important;
    border-bottom: 1px solid grey;
}

and this is the text container:


.headdingtextcon{
    width: 17rem;
    justify-self: center;
    align-self: center;
    height: min-content;
    padding: 0.5rem;
    position: relative !important;
    top: -5rem;
    left: -1.5rem;
    font-size: 2rem;
    z-index: 1 !important;
}

I want my nav container to overlap my text container but it dose the opposite:
enter image description here

For context my navbar has a animation on it that might help


.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    }
    @keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    } 
  


  .slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideOutUp {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    }
    }
    @keyframes slideOutUp {
    0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    }
    }

The text container is the one that has the sweet word next to it.

Tags:

2

Answers


  1. 0

    Answer

    edit:

    In your case you have not set a background-color or background property on the navbar. Css by default makes your containers transparent, thus showing the text underneath.

    Code

    .myNavbar {
  background-color: black;
}
    Login or Signup to reply.
  2. 0

    It appears that you have set the top property plus the position property on your text container.
    The top property moves the element relative to its top edge, while the position: relative property positions the element relative to its normal position.
    The text container is thus moved below where it should normally be, making space for the navbar to appear above it.
    You can test with altering the position and z-index properties on both containers if you want the navbar to cover the text container. For instance, you might change the navbar container’s position property from relative to absolute so that it would not follow the regular flow of the document and could overlap other elements. Then, you can raise its z-index value to guarantee that it will be displayed above the other items. Finally, you may modify the text container’s z-index value to position it below the navbar.

    .containerham {
    width: 100%;
    height: max-content;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    position: absolute; /* changed from "relative" */
    z-index: 1000; /* increased value */
    border-bottom: 1px solid grey;
}

.headdingtextcon {
    width: 17rem;
    justify-self: center;
    align-self: center;
    height: min-content;
    padding: 0.5rem;
    position: relative; /* changed from "relative" */
    top: -5rem;
    left: -1.5rem;
    font-size: 2rem;
    z-index: 999; /* decreased value */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search