stackoom
  简体   繁体   中英

HTML/CSS/JS issues with positioning text on top of background

 原文  2021-01-15 02:02:06  8   1    javascript/ html/ css/ header

Question

I am using HTML CSS and JS to make a page on my website and when adding a logo and a menu as a header, the website does not work as intended. The text is supposed to be on top of the background and is supposed to be on the "overlay" class with is supposed to move to the side also when the menu icon is clicked. Also, the menu icon back ground has been removed and is supposed to be white. I don't know what I did wrong so any help will be appreciated. The bottom STYLE section is used for the menu and the header and the top STYLE code is used for the text I want to be displayed on top.

<!DOCTYPE html>
<html>
    <!DOCTYPE html>
 <section class="showcase">
   <script type="text/javascript">
   window.addEventListener('load', () => {
       const menuToggle = document.querySelector('.toggle');
       const showcase = document.querySelector('.showcase');

       menuToggle.addEventListener('click', () => {
           menuToggle.classList.toggle('active');
           showcase.classList.toggle('active');
       })
   });
      </script>
  <header>
     <style>
        #uploadinfo {
            font-family: 'Poppins', sans-serif;
            font-weight: 00;
            color: #fff;
            line-height: 2em;
            text-transform: uppercase;
            font-size: 1em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 45%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        #back
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 80%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #back:hover
        {
        letter-spacing: 6px;
        }
        #email
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 90%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #email:hover
        {
        letter-spacing: 6px;
        }
        #text {
            font-family: 'Poppins', sans-serif;
            font-weight: 300;
            color: #fff;
            line-height: 2em;
            text-transform: uppercase;
            font-size: 1em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 52.5%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        #info {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            color: #fff;
            line-height: 1em;
            text-transform: uppercase;
            font-size: 3em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 12.5%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        #info2 {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            color: #fff;
            line-height: 1em;
            text-transform: uppercase;
            font-size: 3em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 27.5%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        #back
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 80%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #back:hover
        {
        letter-spacing: 6px;
        }
        #email
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 90%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #email:hover
        {
        letter-spacing: 6px;
        }

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}
header
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding: 40px 100px;
 z-index: 1000;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
header .logo
{
 color: #fff;
 text-transform: uppercase;
 cursor: pointer;
}
.toggle
{
 position: relative;
 width: 60px;
 height: 60px;
 background: url(https://i.ibb.co/HrfVRcx/menu.png);
 background-repeat: no-repeat;
 background-size: 30px;
 background-position: center;
 cursor: pointer;
}
.toggle.active
{
 background: url(https://i.ibb.co/rt3HybH/close.png);
 background-repeat: no-repeat;
 background-size: 25px;
 background-position: center;
 cursor: pointer;
}
.showcase
{
 position: absolute;
 right: 0;
 width: 100%;
 min-height: 100vh;
 padding: 100px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #011721;
 transition: 0.5s;
 z-index: 2;
}
.showcase.active
{
 right: 300px;
}

.showcase video
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.8;
}
.text
{
 z-index: 10;
}

.text h2
{
 font-size: 5em;
 font-weight: 800;
 color: #fff;
 line-height: 1em;
 text-transform: uppercase;
}
.menu
{
 position: absolute;
 top: 0;
 right: 0;
 width: 300px;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
.menu ul
{
 position: relative;
}
.menu ul li
{
 list-style: none;
}
.menu ul li a
{
 text-decoration: none;
 font-size: 24px;
 color: #011721;
}
.menu ul li a:hover
{
 color: #03a9f4; 
}

@media (max-width: 991px)
{
 .showcase,
 .showcase header
 {
   padding: 40px;
 }
 .text h2
 {
   font-size: 3em;
 }
}
    </style>
    <h2 class="logo">LOGO HERE</h2>
    <div class="toggle"></div>
   </header>
   </div>
   </div>
 </section>
 <div class="menu">
   <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/signup">Sign Up</a></li>
     <li><a href="/login">Login</a></li>
     <li><a href="/contact">Contact</a></li>
   </ul>
 </div>
    <div class='overlay'>
    <div class='text'>
        <p id='info'>Text</p>
        <p id='info2'>Text 2</p>
        <p id='uploadinfo'>Text 3</p>
        <a href="/login"><button id='back'>Login</button></a>
        <a href="mailto:EMAIL"><button id='email'>Button</button></a>
    </div>
</div>
    <body style="background-color: #011721;">
    </body>
    </div>
</body>
</html>

1 answers

solution1
 1 ACCPTED  2021-01-15 02:53:57

do you need remove duplicite body tag and adjustment close tag header, clean tags div empty also

This code work ok follow example solution

 window.addEventListener('load', () => { const menuToggle = document.querySelector('.toggle'); const showcase = document.querySelector('.showcase'); menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); showcase.classList.toggle('active'); }) });
 #uploadinfo { font-family: 'Poppins', sans-serif; font-weight: 00; color: #fff; line-height: 2em; text-transform: uppercase; font-size: 1em; margin: 20px 0; max-width: 700px; text-align: center; position: absolute; left: 50%; top: 45%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #back { display: inline-block; font-size: 2.5em; background: #fff; text-transform: uppercase; text-decoration: none; font-weight: 500; margin-top: 10px; color: #111; letter-spacing: 2px; transition: 0.2s; justify-content: center; border: none; text-align: center; position: absolute; left: 50%; top: 80%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #back:hover { letter-spacing: 6px; } #email { display: inline-block; font-size: 2.5em; background: #fff; text-transform: uppercase; text-decoration: none; font-weight: 500; margin-top: 10px; color: #111; letter-spacing: 2px; transition: 0.2s; justify-content: center; border: none; text-align: center; position: absolute; left: 50%; top: 90%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #email:hover { letter-spacing: 6px; } #text { font-family: 'Poppins', sans-serif; font-weight: 300; color: #fff; line-height: 2em; text-transform: uppercase; font-size: 1em; margin: 20px 0; max-width: 700px; text-align: center; position: absolute; left: 50%; top: 52.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; } #info { font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff; line-height: 1em; text-transform: uppercase; font-size: 3em; margin: 20px 0; max-width: 700px; text-align: center; position: absolute; left: 50%; top: 12.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #info2 { font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff; line-height: 1em; text-transform: uppercase; font-size: 3em; margin: 20px 0; max-width: 700px; text-align: center; position: absolute; left: 50%; top: 27.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #back { display: inline-block; font-size: 2.5em; background: #fff; text-transform: uppercase; text-decoration: none; font-weight: 500; margin-top: 10px; color: #111; letter-spacing: 2px; transition: 0.2s; justify-content: center; border: none; text-align: center; position: absolute; left: 50%; top: 80%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #back:hover { letter-spacing: 6px; } #email { display: inline-block; font-size: 2.5em; background: #fff; text-transform: uppercase; text-decoration: none; font-weight: 500; margin-top: 10px; color: #111; letter-spacing: 2px; transition: 0.2s; justify-content: center; border: none; text-align: center; position: absolute; left: 50%; top: 90%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #email:hover { letter-spacing: 6px; } @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } header { position: absolute; top: 0; left: 0; width: 100%; padding: 40px 100px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; } header.logo { color: #fff; text-transform: uppercase; cursor: pointer; }.toggle { position: relative; width: 60px; height: 60px; background: url(https://i.ibb.co/HrfVRcx/menu.png); background-repeat: no-repeat; background-size: 30px; background-position: center; cursor: pointer; }.toggle.active { background: url(https://i.ibb.co/rt3HybH/close.png); background-repeat: no-repeat; background-size: 25px; background-position: center; cursor: pointer; }.showcase { position: absolute; right: 0; width: 100%; min-height: 100vh; padding: 100px; display: flex; justify-content: space-between; align-items: center; background: #011721; transition: 0.5s; z-index: 2; }.showcase.active { right: 300px; }.showcase video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }.text { z-index: 10; }.text h2 { font-size: 5em; font-weight: 800; color: #fff; line-height: 1em; text-transform: uppercase; }.menu { position: absolute; top: 0; right: 0; width: 300px; height: 100%; display: flex; justify-content: center; align-items: center; }.menu ul { position: relative; }.menu ul li { list-style: none; }.menu ul li a { text-decoration: none; font-size: 24px; color: #011721; }.menu ul li a:hover { color: #03a9f4; } @media (max-width: 991px) {.showcase, .showcase header { padding: 40px; }.text h2 { font-size: 3em; } }
 <nav class="menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/signup">Sign Up</a></li> <li><a href="/login">Login</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> <section class="showcase"> <header> <h2 class="logo">LOGO HERE</h2> <div class="toggle"></div> </header> <main> <div class='text'> <p id='info'>Text</p> <p id='info2'>Text 2</p> <p id='uploadinfo'>Text 3</p> <a href="/login"><button id='back'>Login</button></a> <a href="mailto:EMAIL"><button id='email'>Button</button></a> </div> </main> </section>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Trouble in positioning a button on top of input text field in html using css CSS JS HTML Get background to top HTML/CSS/JS Elements positioning Css positioning, positioning issues CSS positioning/resizing html5 video background Positioning item (html, css, js included) CSS overlaying and positioning issues Issues positioning a DIV in CSS JS background with Html text Adding element (circle) on background but behind a text in html css js
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM