標題和側邊欄之間的間距問題-有解無憂

我正在撰寫一個頁面，我有一個頁眉和一個側邊欄，但是我遇到了頂部屬性與我的頁眉重疊的問題，側邊欄必須將頂部值歸零，但在這種情況下，它通過更改值與我的頁眉重疊例如到 10 我解決了這個重疊問題，但在滾動時會產生不需要的間距。我是網頁設計領域的新手，但我已經為此類事件嘗試了多種解決方案，但沒有一個解決方案可以解決此類問題。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


/* Header */

header .navbar {
  font-size: 15px;
  background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
}

header #navbarNavAltMarkup {
  justify-content: flex-end;
}

header #navbarNavAltMarkup .nav-link {
  color: #fff;
  transition: all ease 0.2s;
  margin-left: 50px;
  margin-right: 50px;
}

header #navbarNavAltMarkup .nav-link:hover {
  color: #081145;
  transition: all ease 0.2s;
}

header #navbarNavAltMarkup .active {
  color: #081145;
  font-weight: 400;
}

header #navbarNavAltMarkup .dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  margin-left: 50px;
  margin-right: 50px;
}

header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
  background-color: transparent;
}

header #navbarNavAltMarkup .dropdown {
  position: relative;
  display: inline-block;
}

header #navbarNavAltMarkup .dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 100px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

header #navbarNavAltMarkup .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

header #navbarNavAltMarkup .dropdown a:hover {
  background-color: #ddd;
}

header #navbarNavAltMarkup .show {
  display: block;
}


/* Test */


/* Mobile */

header .navbar-nav {
  align-items: center;
}


/* End Header */


/* Aside */

.sidebar {
  position: fixed;
  left: 0;
  top: 10;
  height: 100%;
  width: 78px;
  /* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
  background: #11101D;
  padding: 2px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}

.sidebar.open {
  width: 250px;
}

.sidebar .logo-details {
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar .logo-details .icon {
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar .logo-details .logo_name {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
  opacity: 1;
}

.sidebar .logo-details #btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 22px;
  transition: all 0.4s ease;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.sidebar.open .logo-details #btn {
  text-align: right;
}

.sidebar i {
  color: #fff;
  height: 60px;
  min-width: 50px;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}

.sidebar .nav-list {
  margin-top: 20px;
  height: 100%;
}

.sidebar li {
  position: relative;
  margin: 8px 0;
  list-style: none;
}

.sidebar li .tooltip {
  position: absolute;
  top: -20px;
  left: calc(100%   15px);
  z-index: 3;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: 0s;
}

.sidebar ol,
ul {
  padding-left: 0px;
}

.sidebar li:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar.open li .tooltip {
  display: none;
}

.sidebar input {
  font-size: 15px;
  color: #FFF;
  font-weight: 400;
  outline: none;
  height: 50px;
  width: 100%;
  width: 50px;
  border: none;
  border-radius: 12px;
  transition: all 0.5s ease;
  background: #1d1b31;
}

.sidebar.open input {
  padding: 0 20px 0 50px;
  width: 100%;
}

.sidebar .bx-search {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 22px;
  background: #1d1b31;
  color: #FFF;
}

.sidebar.open .bx-search:hover {
  background: #1d1b31;
  color: #FFF;
}

.sidebar .bx-search:hover {
  background: #FFF;
  color: #11101d;
}

.sidebar li a {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #11101D;
}

.sidebar li a:hover {
  background: #FFF;
}

.sidebar li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

.sidebar.open li a .links_name {
  opacity: 1;
  pointer-events: auto;
}

.sidebar li a:hover .links_name,
.sidebar li a:hover i {
  transition: all 0.5s ease;
  color: #11101D;
}

.sidebar li i {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 12px;
}

.sidebar li.profile {
  position: fixed;
  height: 60px;
  width: 78px;
  left: 0;
  bottom: -8px;
  padding: 10px 14px;
  background: #1d1b31;
  transition: all 0.5s ease;
  overflow: hidden;
}

.sidebar.open li.profile {
  width: 250px;
}

.sidebar li .profile-details {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.sidebar li img {
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
}

.sidebar li.profile .name,
.sidebar li.profile .job {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.sidebar li.profile .job {
  font-size: 12px;
}

.sidebar .profile #log_out {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #1d1b31;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-radius: 0px;
  transition: all 0.5s ease;
}

.sidebar.open .profile #log_out {
  width: 50px;
  background: none;
}

body {
  background: #E4E9F7;
}

.home-section {
  position: relative;
  min-height: 100vh;
  top: 0;
  left: 78px;
  width: calc(100% - 78px);
  transition: all 0.5s ease;
  z-index: 2;
}

.sidebar.open~.home-section {
  left: 250px;
  width: calc(100% - 250px);
}

.home-section .text {
  display: inline-block;
  color: #11101d;
  font-size: 25px;
  font-weight: 500;
  margin: 18px
}

@media (max-width: 420px) {
  .sidebar li .tooltip {
    display: none;
  }
}


/* End Aside */

<header>
  <nav class="navbar navbar-expand-lg">

    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon p-0 m-0">
                        <img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
                        </span>
                    </button>
      <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">PAINEL</a>
          <a class="nav-link" href="#">CNGR</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
          <a class="nav-link" href="#">VOIP</a>

          <div class="dropdown ">
            <button onclick="myFunction()" class="dropbtn">
                                    PROFILE
                                </button>
            <div id="myDropdown" class="dropdown-content">
              <a href="#home">Perfil</a>
              <a href="#about">Logout</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </nav>

</header>

<main>
  <sidebar class="sidebar">
    <div class="logo-details">
      <i class='bx bx-phone icon'></i>
      <div class="logo_name">VOIP</div>
      <i class='bx bx-menu' id="btn"></i>
    </div>
    <ul class="nav-list">
      <li>
        <i class='bx bx-search'></i>
        <input type="text" placeholder="Search...">
        <span class="tooltip">Search</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-grid-alt'></i>
          <span class="links_name">Dashboard</span>
        </a>
        <span class="tooltip">Dashboard</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-data'></i>
          <span class="links_name">Database</span>
        </a>
        <span class="tooltip">User</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-chat'></i>
          <span class="links_name">Messages</span>
        </a>
        <span class="tooltip">Messages</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-pie-chart-alt-2'></i>
          <span class="links_name">Analytics</span>
        </a>
        <span class="tooltip">Analytics</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-folder'></i>
          <span class="links_name">File Manager</span>
        </a>
        <span class="tooltip">Files</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cart-alt'></i>
          <span class="links_name">Order</span>
        </a>
        <span class="tooltip">Order</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-heart'></i>
          <span class="links_name">Saved</span>
        </a>
        <span class="tooltip">Saved</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cog'></i>
          <span class="links_name">Setting</span>
        </a>
        <span class="tooltip">Setting</span>
      </li>
      <li class="profile">
        <div class="profile-details">
          <img src="profile.jpg" alt="profileImg">
          <div class="name_job">
            <div class="name">Prem Shahi</div>
            <div class="job">Web designer</div>
          </div>
        </div>
        <i class='bx bx-log-out' id="log_out"></i>
      </li>
    </ul>

  </sidebar>
  <section class="home-section">
    <div class="text">Dashboard</div>

  </section>
</main>

uj5u.com熱心網友回復：

如上所述，您的問題有兩種解決方案：

您可以z-index在標題上使用并將其放在側邊欄上方

因為那有z-index使用價值sidebar是-1。使用它時，您必須小心，因為某些內容可能會重疊（覆寫）您的側邊欄，因此最好margin在left

使用 sticky 屬性讓它在滾動時粘在頂部

您必須對自己的CSS外觀進行大量更改才能立即進行查看，但是首先您可以使用display: block它position: sticky來開始并在旅途中進行改進

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


/* Header */

header .navbar {
  font-size: 15px;
  background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
}

header #navbarNavAltMarkup {
  justify-content: flex-end;
}

header #navbarNavAltMarkup .nav-link {
  color: #fff;
  transition: all ease 0.2s;
  margin-left: 50px;
  margin-right: 50px;
}

header #navbarNavAltMarkup .nav-link:hover {
  color: #081145;
  transition: all ease 0.2s;
}

header #navbarNavAltMarkup .active {
  color: #081145;
  font-weight: 400;
}

header #navbarNavAltMarkup .dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  margin-left: 50px;
  margin-right: 50px;
}

header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
  background-color: transparent;
}

header #navbarNavAltMarkup .dropdown {
  position: relative;
  display: inline-block;
}

header #navbarNavAltMarkup .dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 100px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

header #navbarNavAltMarkup .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

header #navbarNavAltMarkup .dropdown a:hover {
  background-color: #ddd;
}

header #navbarNavAltMarkup .show {
  display: block;
}


/* Test */


/* Mobile */

header .navbar-nav {
  align-items: center;
}


/* End Header */


/* Aside */

.sidebar {
  position: fixed;
  left: 0;
  top: 10;
  height: 100%;
  width: 78px;
  /* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
  background: #11101D;
  padding: 2px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}

.sidebar.open {
  width: 250px;
}

.sidebar .logo-details {
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar .logo-details .icon {
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar .logo-details .logo_name {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
  opacity: 1;
}

.sidebar .logo-details #btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 22px;
  transition: all 0.4s ease;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.sidebar.open .logo-details #btn {
  text-align: right;
}

.sidebar i {
  color: #fff;
  height: 60px;
  min-width: 50px;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}

.sidebar .nav-list {
  margin-top: 20px;
  height: 100%;
}

.sidebar li {
  position: relative;
  margin: 8px 0;
  list-style: none;
}

.sidebar li .tooltip {
  position: absolute;
  top: -20px;
  left: calc(100%   15px);
  z-index: 3;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: 0s;
}

.sidebar ol,
ul {
  padding-left: 0px;
}

.sidebar li:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar.open li .tooltip {
  display: none;
}

.sidebar input {
  font-size: 15px;
  color: #FFF;
  font-weight: 400;
  outline: none;
  height: 50px;
  width: 100%;
  width: 50px;
  border: none;
  border-radius: 12px;
  transition: all 0.5s ease;
  background: #1d1b31;
}

.sidebar.open input {
  padding: 0 20px 0 50px;
  width: 100%;
}

.sidebar .bx-search {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 22px;
  background: #1d1b31;
  color: #FFF;
}

.sidebar.open .bx-search:hover {
  background: #1d1b31;
  color: #FFF;
}

.sidebar .bx-search:hover {
  background: #FFF;
  color: #11101d;
}

.sidebar li a {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #11101D;
}

.sidebar li a:hover {
  background: #FFF;
}

.sidebar li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

.sidebar.open li a .links_name {
  opacity: 1;
  pointer-events: auto;
}

.sidebar li a:hover .links_name,
.sidebar li a:hover i {
  transition: all 0.5s ease;
  color: #11101D;
}

.sidebar li i {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 12px;
}

.sidebar li.profile {
  position: fixed;
  height: 60px;
  width: 78px;
  left: 0;
  bottom: -8px;
  padding: 10px 14px;
  background: #1d1b31;
  transition: all 0.5s ease;
  overflow: hidden;
}

.sidebar.open li.profile {
  width: 250px;
}

.sidebar li .profile-details {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.sidebar li img {
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
}

.sidebar li.profile .name,
.sidebar li.profile .job {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.sidebar li.profile .job {
  font-size: 12px;
}

.sidebar .profile #log_out {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #1d1b31;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-radius: 0px;
  transition: all 0.5s ease;
}

.sidebar.open .profile #log_out {
  width: 50px;
  background: none;
}

body {
  background: #E4E9F7;
}

.home-section {
  position: relative;
  min-height: 100vh;
  top: 0;
  left: 78px;
  width: calc(100% - 78px);
  transition: all 0.5s ease;
  z-index: 2;
}

.sidebar.open~.home-section {
  left: 250px;
  width: calc(100% - 250px);
}

.home-section .text {
  display: inline-block;
  color: #11101d;
  font-size: 25px;
  font-weight: 500;
  margin: 18px
}

@media (max-width: 420px) {
  .sidebar li .tooltip {
    display: none;
  }
}


/* End Aside */

<header>
  <nav class="navbar navbar-expand-lg">

    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon p-0 m-0">
                        <img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
                        </span>
                    </button>
      <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">PAINEL</a>
          <a class="nav-link" href="#">CNGR</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
          <a class="nav-link" href="#">VOIP</a>

          <div class="dropdown ">
            <button onclick="myFunction()" class="dropbtn">
                                    PROFILE
                                </button>
            <div id="myDropdown" class="dropdown-content">
              <a href="#home">Perfil</a>
              <a href="#about">Logout</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </nav>

</header>

<main>
  <sidebar class="sidebar">
    <div class="logo-details">
      <i class='bx bx-phone icon'></i>
      <div class="logo_name">VOIP</div>
      <i class='bx bx-menu' id="btn"></i>
    </div>
    <ul class="nav-list">
      <li>
        <i class='bx bx-search'></i>
        <input type="text" placeholder="Search...">
        <span class="tooltip">Search</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-grid-alt'></i>
          <span class="links_name">Dashboard</span>
        </a>
        <span class="tooltip">Dashboard</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-data'></i>
          <span class="links_name">Database</span>
        </a>
        <span class="tooltip">User</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-chat'></i>
          <span class="links_name">Messages</span>
        </a>
        <span class="tooltip">Messages</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-pie-chart-alt-2'></i>
          <span class="links_name">Analytics</span>
        </a>
        <span class="tooltip">Analytics</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-folder'></i>
          <span class="links_name">File Manager</span>
        </a>
        <span class="tooltip">Files</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cart-alt'></i>
          <span class="links_name">Order</span>
        </a>
        <span class="tooltip">Order</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-heart'></i>
          <span class="links_name">Saved</span>
        </a>
        <span class="tooltip">Saved</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cog'></i>
          <span class="links_name">Setting</span>
        </a>
        <span class="tooltip">Setting</span>
      </li>
      <li class="profile">
        <div class="profile-details">
          <img src="profile.jpg" alt="profileImg">
          <div class="name_job">
            <div class="name">Prem Shahi</div>
            <div class="job">Web designer</div>
          </div>
        </div>
        <i class='bx bx-log-out' id="log_out"></i>
      </li>
    </ul>

  </sidebar>
  <section class="home-section">
    <div class="text">Dashboard</div>

  </section>
</main>

With 1st solution there also comes some problem like your content will be hidden under header until you scroll . Here you can use margin and sticky for inside content of sidebar or it is better to improve CSS and go 2nd option

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/334959.html

標籤：javascript html css

上一篇：選中單選按鈕的重定向值顯示在

下一篇：'{identifier:string;型別的引數}'不可分配給型別為'ConcatArray<never>'的引數