主页 / 问题 / 1369947
Accepted
shaidullin2h
Asked:2022-06-10 02:06:05 +0000 UTC2022-06-10 02:06:05 +0000 UTC

如何将标题放在主块上，而不是单独放置

  • 772

朋友们。遇到这样的问题，解决不了，只有position:fixed，但不需要fixed header。我不知道如何正确地提出这个问题，所以我将说明：它对我来说是如何变成的，下面，根据需要。 在此处输入图像描述

标题必须位于带有信息的块的背景上。在此处输入图像描述

HTML 标题：

<header className="header">
    <span className="logo">LOGO</span>
    <nav className="nav-items">
      <ul className="ul-items">
        <li>О нас</li>
        <li>Услуги</li>
        <li>Портфолио</li>
        <li>Награды</li>
      </ul>
    </nav>
    <span className="phone">+800 000 0000</span>      
  </header>


.header {
  color:#FFF;
  padding-top: 32px;  
  max-width: 1600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
    .logo{
      margin-left: 95px;
      font-size: 36px;
    }
    .phone{
      margin-right: 95px;
      font-size: 24px;
    }
    
    z-index: 999;
  }




.ul-items {
  li{
    list-style-type: none;
    font-size: 20px;
    display: inline;
    padding: 50px;
  }
}
javascript

2 个回答

  1. 令人惊讶的是，这通常必须实现，但在这种情况下，它无法在 html 上解决。您将不得不使用 javascript 来跟踪页面的滚动。因此，当滚动达到某个值时，您将样式更改为position:fixed，并更改背景标题。

    PS 使元素透明但其子元素具有不透明度使用：background: rgba(0,0,0,0)其中最后一个零是背景的透明度

    • 1
  2. Best Answer

    在这种情况下，最简单和最好的选择是 position: absolute with width: 100%。之后，标题站在所需的位置。

    • 0

相关问题