堆栈内存溢出
  简体   繁体   English

HTML/CSS/JS 在背景上定位文本的问题

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

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

问题描述

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.我正在使用 HTML CSS 和 JS 在我的网站上创建一个页面，并且在将徽标和菜单添加为 header 时，该网站无法按预期工作。 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.文本应该在背景之上，并且应该在“覆盖” class 上，并且在单击菜单图标时也应该移动到一边。 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.底部 STYLE 部分用于菜单和 header，顶部 STYLE 代码用于我想在顶部显示的文本。

<!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 个解决方案

解决方案1
 1 已采纳  2021-01-15 02:53:57

do you need remove duplicite body tag and adjustment close tag header, clean tags div empty also你需要删除重复的正文标签并调整关闭标签 header，清理标签 div 也为空

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用CSS将按钮放置在html中的输入文本字段顶部时出现问题 - Trouble in positioning a button on top of input text field in html using css CSS JS HTML 获取背景到顶部 - CSS JS HTML Get background to top HTML / CSS / JS元素定位 - HTML/CSS/JS Elements positioning CSS定位，定位问题 - Css positioning, positioning issues CSS 定位/调整 html5 视频背景 - CSS positioning/resizing html5 video background 定位项（包括html，css，js） - Positioning item (html, css, js included) CSS 覆盖和定位问题 - CSS overlaying and positioning issues 在CSS中放置DIV的问题 - Issues positioning a DIV in CSS 带有 Html 文本的 JS 背景 - JS background with Html text 在背景上添加元素（圆圈）但在 html css js 中的文本后面 - Adding element (circle) on background but behind a text in html css js
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM