固定位置时，样式卡会超出我的顶部导航栏的顶部

问题描述 投票：0回答：2

我只是在学习，所以不要轻视我的 HTML 和 CSS :)

我正在努力处理我的顶部导航栏。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我试图使顶部固定，因为左侧导航栏已固定，因此滚动时左侧会移动，但顶部不会，当我固定顶部时，产品样式卡位于导航栏上方。

html {
  scroll-behavior: smooth;
}

body {
  background-color: #EFEFEF;
}

#top-nav {
  background-color: #1B2430;
  padding-top: 10px;
  padding-bottom: 10px;
}

#sidebarMenu {
  position: fixed !important;
}


/* Logo */

.navbar-brand {
  color: #007bff !important;
  font-size: 20px;
  padding-left: 10px;
  padding-right: 150px;
}


/* NavBar Text Links */

.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: white !important;
}


/* Navbar Text */

.navbar-nav {
  padding-left: 30px;
}


/* Search Button */

.btn-1 {
  color: #007bff;
  border-color: white;
}


/* Checkout Cart */

.cart {
  color: white;
  padding-top: 7px;
  padding-left: 160px;
}


/* Sidebar */

.sidebar {
  background-color: #1B2430 !important;
  position: fixed;
  top: 55px;
  bottom: 0;
  left: 0;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 240px;
  z-index: 600;
  padding-top: 10px;
}

.text-color {
  color: white;
}

.list-group-item {
  background-color: #1B2430;
}

.list-group-item.active {
  background-color: #1B2430;
}


/* Sign out  */

.sign-out {
  padding-top: 200px !important;
  padding-left: 10px;
  color: white;
}

.sign-out:hover {
  color: white;
}

.power-btn {
  color: red;
}


/* Product Style Cards */

#style-card {
  align-items: center;
  padding-left: 240px;
}

.container-fluid {
  padding-top: 20px;
}

.img-fluid {
  height: 200px;
  padding-top: 15px;
}

.btn-secondary {
  background-color: #007bff;
}

hr {
  background-color: #007bff;
}
<!-- Fontawsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-1">
  <div id="top-nav">

    <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">EmailedXboxLive LTD</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="What you looking for?" aria-label="Search">
          <button type="button" class="btn btn-secondary btn-rounded">Search</button>
        </form>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item ">
            <a class="nav-link" href="#">All</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Play Station</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Xbox Live</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">iTunes</a>
          </li>

          <!-- Cart Icon -->
          <div class="cart">
            <a class="cart" href="#"><i class="fa fa-shopping-cart" style="font-size:24px"></i></a>
          </div>

        </ul>
      </div>
    </nav>
  </div>
</div>



<!-- Side Navbar -->

<div class="container-2">


  <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
    <div class="position-sticky">
      <div class="list-group list-group-flush mx-3 mt-4">
        <a href="#" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
          <i class="fas fa-tachometer-alt fa-fw me-3"></i><span>(ACCOUNT NAME)</span>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-2 ripple active">
          <i class="text-color fas fa-chart-area fa-fw me-3"></i><span>Main Dashboard</span>
        </a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-line fa-fw me-3"></i><span>My Orders</span></a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-line fa-fw me-3"></i><span>My Wallet</span></a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple">
          <i class="text-color fa-chart-pie fa-fw me-3"></i><span>Billing</span>
        </a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-bar fa-fw me-3"></i><span>Notifications</span></a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-line fa-fw me-3"></i><span>Account Settings</span></a>

        <!-- Sign Out -->
        <div class="sign-out">
          <a href="#" class="sign-out" <span><i class="power-btn fa fa-power-off" style="font-size:15px"></i> Sign Out</span></a>
        </div>

      </div>
    </div>
</div>

<!-- Product Style Cards -->

<div class="container-fluid">
  <div id="style-card">
    <div class="row">
      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £10 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>


      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £15 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>

      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £20 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>

      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £25 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>

      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £25 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>


    </div>
  </div>
</div>

html css bootstrap-4 navbar styling
2个回答
0
投票

为了修复顶部导航栏，似乎只需将 Bootstrap 的 

sticky-top
类添加到它的容器中即可：

<div class="container-1 sticky-top">

与 

fixed
不同，具有 
sticky
位置的元素按照文档的正常流程放置，并在滚动时保持预定义位置。

有关 Bootstrap 文档中导航栏放置的更多信息

希望这会有所帮助。

将以下示例展开整页以查看结果：

html {
  scroll-behavior: smooth;
}

body {
  background-color: #EFEFEF;
}

#top-nav {
  background-color: #1B2430;
  padding-top: 10px;
  padding-bottom: 10px;
}

#sidebarMenu {
  position: fixed !important;
}


/* Logo */

.navbar-brand {
  color: #007bff !important;
  font-size: 20px;
  padding-left: 10px;
  padding-right: 150px;
}


/* NavBar Text Links */

.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: white !important;
}


/* Navbar Text */

.navbar-nav {
  padding-left: 30px;
}


/* Search Button */

.btn-1 {
  color: #007bff;
  border-color: white;
}


/* Checkout Cart */

.cart {
  color: white;
  padding-top: 7px;
  padding-left: 160px;
}


/* Sidebar */

.sidebar {
  background-color: #1B2430 !important;
  position: fixed;
  top: 55px;
  bottom: 0;
  left: 0;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 240px;
  z-index: 600;
  padding-top: 10px;
}

.text-color {
  color: white;
}

.list-group-item {
  background-color: #1B2430;
}

.list-group-item.active {
  background-color: #1B2430;
}


/* Sign out  */

.sign-out {
  padding-top: 200px !important;
  padding-left: 10px;
  color: white;
}

.sign-out:hover {
  color: white;
}

.power-btn {
  color: red;
}


/* Product Style Cards */

#style-card {
  align-items: center;
  padding-left: 240px;
}

.container-fluid {
  padding-top: 20px;
}

.img-fluid {
  height: 200px;
  padding-top: 15px;
}

.btn-secondary {
  background-color: #007bff;
}

hr {
  background-color: #007bff;
}
<!-- Fontawsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- 👇 Add the sticky-top class here -->
<div class="container-1 sticky-top">
  <div id="top-nav">

    <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">EmailedXboxLive LTD</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="What you looking for?" aria-label="Search">
          <button type="button" class="btn btn-secondary btn-rounded">Search</button>
        </form>

        <ul class="navbar-nav mr-auto">

          <li class="nav-item ">
            <a class="nav-link" href="#">All</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Play Station</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Xbox Live</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">iTunes</a>
          </li>

          <!-- Cart Icon -->
          <div class="cart">
            <a class="cart" href="#"><i class="fa fa-shopping-cart" style="font-size:24px"></i></a>
          </div>

        </ul>
      </div>
    </nav>
  </div>
</div>



<!-- Side Navbar -->

<div class="container-2">


  <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
    <div class="position-sticky">
      <div class="list-group list-group-flush mx-3 mt-4">
        <a href="#" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
          <i class="fas fa-tachometer-alt fa-fw me-3"></i><span>(ACCOUNT NAME)</span>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-2 ripple active">
          <i class="text-color fas fa-chart-area fa-fw me-3"></i><span>Main Dashboard</span>
        </a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-line fa-fw me-3"></i><span>My Orders</span></a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-line fa-fw me-3"></i><span>My Wallet</span></a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple">
          <i class="text-color fa-chart-pie fa-fw me-3"></i><span>Billing</span>
        </a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-bar fa-fw me-3"></i><span>Notifications</span></a>
        <a href="#" class="text-color list-group-item list-group-item-action py-2 ripple"><i class="fas fa-chart-line fa-fw me-3"></i><span>Account Settings</span></a>

        <!-- Sign Out -->
        <div class="sign-out">
          <a href="#" class="sign-out" <span><i class="power-btn fa fa-power-off" style="font-size:15px"></i> Sign Out</span></a>
        </div>

      </div>
    </div>
</div>

<!-- Product Style Cards -->

<div class="container-fluid">
  <div id="style-card">
    <div class="row">
      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £10 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>


      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £15 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>

      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £20 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>

      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £25 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>

      <div class="col-3">
        <div class="card text-center ">
          <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
            <img src="https://m.media-amazon.com/images/I/61PIuW89+wL._AC_SY445_.jpg" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title">Play Station £25 UK</h5>
            <hr>
            <p>Qty:</p>
            <button type="button" class="btn btn-secondary btn-rounded">Buy Now</button>
          </div>
        </div>
      </div>


    </div>
  </div>
</div>

0
投票

我遇到了这个问题，对我来说它在“静态”位置上有效：

在你的CSS中：

.navbar { position: fixed;}

.card { position: static;}

我还在网站上工作，不知道以后会不会给我带来任何问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.