-1

I have this HEROTEXTBOX on top of my page on the header, it containes texts and image. 

 .topbannerbox {
    position: absolute;
    width: 1000px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);   
}

and this is my Header CSS: 

   header {
    background-image: url(imgs/covertoplight3.jpg);
    background-color: #fff;
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;    
}

ABSLOUTE MAKES THIS STAY ON TOP .. if I change it to FIXED it will scroll down but ON TOP of everything in my page body. how do I make it to scroll down hidden in at the top where the header ends ?

HTML header: 

     <header>

        <!-- Load font awesome icons -->


<!-- The social media icon bar -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fab fa-facebook"></i></a> 
  <a href="#" class="linkedin"><i class="fab fa-github-alt"></i></a> 
  <a href="#" class="youtube"><i class="fab fa-youtube-square"></i></a> 
<a href="#" class="twitter"><i class="fab fa-twitter-square"></i></a> 
</div> 

                  <nav>

                        <div class="menu-icon">
                              <i class="fa fa-bars fa-1x"></i>
                        </div>

                        <div class="logo">

                        </div>


                              <ul>
                                  <li><a href="#">Home</a></li>
                                    <li><a href="#">Login</a></li>
                                  <li><a href="#about">Skills</a></li>
                                  <li><a href="#">Blog</a></li>
                                  <li><a href="#">Projects</a></li>
                                  <li><a href="#">Contact</a></li>
                              </ul>

                  </nav> 

     <div class="parts">      
   <div id="particles-js"></div></div>
            <div class="topbannerbox" >

                <div class="wrap" >
    <br>


                    <div class="mobilelogo"><center><img class="logoscreen logoscreen1440 logoscreen1080 logoscreen1366" src="css/imgs/lojo2.png"></center></div>
</div> 
                <center><hr width="45%" style="border: 1px dashed #7f7a77;" /></center>
                <br>
                <div class = "topmid2"> <center><h1 >Because average is not acceptable, </h1></center></div>
               <br>
                <div class = "topmid"><center><h2><font color="455268" ><b>we go beyond to bring you a memorable experience. </b></font></h2></center></div>
                <br>

               <div class="headbutton headbutton1080 headbutton1366 headbuttonm"> <a class="btn btn-full" href="#about">Who am I ?</a>

</div>




            </div>


        </header>

Here is how the header looks like at top

and here as I scroll down the background image doess well , LEAVING THE TEXT AND BUTTON BEHIND to go down on the body

I would really like to figure this one out .. hope someone can help me fix itt.

I tried doing a lot and didn't work for me ..

any ideas ?

Møhamëd Nagý
  • 13
  • 6
  • it be very disappointing if there is no fix to this – Møhamëd Nagý Jul 27 '18 at 21:26
  • Your question is very unclear. For instance, you say "if I change it to FIXED it will scroll down but ON TOP of everything in my page body" -- but generally things that are position:fixed *don't* scroll at all as the page scrolls. What do you mean when you say scroll? – lemoncucumber Jul 27 '18 at 21:33
  • I Check the images bro , it’s simple when top my div class .topbannerbox set to absolute, the text and the button stay at top and if it’s set to FIXED instead , beacuse I want it to slide down, like the backgroud does ... it then goes down , but it keeps going down ontop the body content . i want it slide down behind in the top – Møhamëd Nagý Jul 27 '18 at 21:40
  • Do you want it to scroll normally like part of the page, or do you want it to remain in a visually fixed position but be obscured by the rest of the page covering it as you scroll down the page? – lemoncucumber Jul 27 '18 at 21:42

2 Answers2

0

None of your example pictures show up so it's hard for me to tell exactly what your problem is and what behavior you want without seeing all of the code, but it sounds like a problem that is related to and could likely be solved by adjusting the z-index of your elements.

The z-index of an element essentially tells the browser the order you want your elements to show up in (which are on top of each other). You can learn more about exactly how it works here: MDN z-index documentation

Try setting the z-index to 1 on the items that you want to be displayed on top. If you can update your post with pictures I can probably give you a more direct answer. Good luck!

Stephen
  • 399
  • 3
  • 8
  • no image, no problem ... here is the example , www.arabi4design.com. The .header has a background image that is now set to fixed, and so u can see the background image srcoll down, and the div .topbannerbox that has the logo image, text and button is now set to asbloute, that's why u see it stick to the top, if I set it to fixed, it will scroll down too juss like the back ground, but then will keep going down on the body , where the login and everything else is .. and I'm not sure what to set the index for exactly ? in where ? – Møhamëd Nagý Jul 27 '18 at 21:50
0

I'm guessing you're trying to achieve an effect where the header doesn't scroll as the page scrolls, but rather remains in place and is covered by the rest of the page as you scroll down the page.

You can achieve this by making the header position:fixed and setting a higher z-index for the element that you want to scroll on top of it, but you'll also need to set that element to position:relative. This answer explains why: z-index not working with fixed positioning

lemoncucumber
  • 133
  • 1
  • 5
  • I think I answered your question, did you try my solution? – lemoncucumber Jul 27 '18 at 22:34
  • or maybe .. give an example accroding to my code, if u wanna help – Møhamëd Nagý Jul 27 '18 at 22:36
  • bu yea that's what I wanna do , " but rather remains in place and is covered by the rest of the page as you scroll down the page." – Møhamëd Nagý Jul 27 '18 at 22:36
  • Okay, so here's what you want to do: Set the header to position: fixed. Group everything after the header into a single div or a section or something. Set the CSS on that element to something like this: position: relative; z-index: 100; background: white; – lemoncucumber Jul 27 '18 at 22:49