Javascript 滑块的填充会影响固定顶杆

我有一个HTML部分的顶部栏，这是固定的查看端口。和滑块的另一部分。这两个部分并不完全相关，因为它们在DOM树中处于同一级别。但是当我编辑Slider的div.col的默认填充时，它会影响顶栏。当编辑部分填充时，似乎顶部的条被拉到底部和右侧。我已经试过了，但没有办法帮上忙。你能给我一些建议吗？非常感谢你。您可以在以下位置查看实时演示：

顶部幻灯片：

import React from 'react';
import {NavLink} from "react-router-dom";
import TinySlider from "tiny-slider-react"
const settings = {
    items: 1,
    nav: false,
    autoplay: true
}

const TopSlide = () => {
    return (
        <section className="top-slide">
            <div className="container-fluid">
                <div className="row">
                    <div className="col">
                        <div className="wrap">
                            <TinySlider settings={settings}>
                                <div className="slide-item item-1">
                                    <div className="background-image"></div>
                                    <div className="slide-caption">
                                        <h5 className="title">Always update the latest</h5>
                                        <NavLink
                                            to="/best-sales"
                                            className="link"
                                        >
                                            Discover Now
                                        </NavLink>
                                    </div>
                                </div>
                                <div className="slide-item item-2">
                                    <div className="background-image"></div>
                                    <div className="slide-caption">
                                        <h5 className="title">Bring you the champion's fashion</h5>
                                        <NavLink
                                            to="/champion"
                                            className="link"
                                        >
                                            Discover Now
                                        </NavLink>
                                    </div>
                                </div>
                                <div className="slide-item item-3">
                                    <div className="background-image"></div>
                                    <div className="slide-caption">
                                        <h5 className="title">Top-five leagues in the world</h5>
                                        <NavLink
                                            to="/all-fashion"
                                            className="link"
                                        >
                                            Discover Now
                                        </NavLink>
                                    </div>
                                </div>
                            </TinySlider>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default TopSlide;

滑块：

/*--- top slide ---*/
.top-slide {
margin-top: 10px;
  .container-fluid {
    .row {
      .col {
        padding: 0; PROBLEM HERE, IF REMOVE THIS TOP BAR WILL BE NOT AFFECTED, BUT I NEED TO KEEP THIS SO THAT IT LOOKS BETTER IN MOBILE
        .wrap {
          .tns-outer {
            > button {
              display: none;
            }
            position: relative;
            /* next and back button of slide */
            .tns-controls {
              z-index: 100;
              position: absolute;
              top: 40%;
              width: 100%;
              padding: 0 5px;
              display: flex;
              justify-content: space-between;
              button {
                border: none;
                outline: none;
                background: transparent;
                color: transparent;
                width: 20px;
                height: 20px;
                background : {
                  size: cover;
                  position: center;
                  repeat: no-repeat;
                }
              }
              button[data-controls=prev] {
                background-image: url("../src/Assets/images/section-top-slide/previous-3.png")
              }
              button[data-controls=next] {
                background-image: url("../src/Assets/images/section-top-slide/next-3.png")
              }
            }
            .tns-ovh {
              .tns-inner {
                .tns-slider {
                  /* each item of slider is a div named slide-item */
                  .slide-item {
                    .background-image {
                      height: 150px;
                      background: {
                        position: center 0;
                        repeat: no-repeat;
                        size: cover;
                      }
                    }
                    .slide-caption {
                      text-align: center;
                      .title {
                        font-weight: bold;
                        font-size: 16px;
                        margin-bottom: 0;
                      }
                      .link {
                        color: white;
                        background: $color-red;
                        display: inline-block;
                        padding: 2px 5px;
                        border-radius: 3px;
                        font-size: 14px;
                        font-weight: bold;
                      }
                    }
                  }
                  .slide-item.item-1 {
                    .background-image {
                      background-image: url("../src/Assets/images/section-top-slide/tot.webp")
                    }
                  }
                  .slide-item.item-2 {
                    .background-image {
                      background-image: url("../src/Assets/images/section-top-slide/arsenal.jpg")
                    }
                    .title {
                      text-shadow: 1px 1px 3px $color-red;
                    }
                  }
                  .slide-item.item-3 {
                    .background-image {
                      background-image: url("../src/Assets/images/section-top-slide/mc.jpg")
                    }
                    .title {
                      text-shadow: 1px 1px 3px #5fa5e3;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/*--- end top slide ---*/

---

我听不懂你的问题。topbar应该在哪里？Jerry top bax固定在底部无法理解您的问题。顶杆应该在哪里？Jerry top bax固定在底部

/*--- top bar ---*/
.top-bar {
  z-index: 2000;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  border-top: 1px solid rgb(235, 235, 235);
  background: white;
  .container-fluid {
    .row {
      .wrap {
        width: 100%;
        a {
          display: block;
          width: 100%;
        }
        img {
          height: 30px;
        }
      }
      .col-3.ball-icon {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 5px;
        img {
          width: 30px;
        }
      }
      .col-6.leagues-icon {
        text-align: center;
        img {
          height: 35px;
        }
      }
      .col-3.top-bar-hot-deals {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 5px;
        img {
          width: 100%;
        }
      }
    }
  }
}
/*--- end top bar ---*/

/*--- top slide ---*/
.top-slide {
margin-top: 10px;
  .container-fluid {
    .row {
      .col {
        padding: 0; PROBLEM HERE, IF REMOVE THIS TOP BAR WILL BE NOT AFFECTED, BUT I NEED TO KEEP THIS SO THAT IT LOOKS BETTER IN MOBILE
        .wrap {
          .tns-outer {
            > button {
              display: none;
            }
            position: relative;
            /* next and back button of slide */
            .tns-controls {
              z-index: 100;
              position: absolute;
              top: 40%;
              width: 100%;
              padding: 0 5px;
              display: flex;
              justify-content: space-between;
              button {
                border: none;
                outline: none;
                background: transparent;
                color: transparent;
                width: 20px;
                height: 20px;
                background : {
                  size: cover;
                  position: center;
                  repeat: no-repeat;
                }
              }
              button[data-controls=prev] {
                background-image: url("../src/Assets/images/section-top-slide/previous-3.png")
              }
              button[data-controls=next] {
                background-image: url("../src/Assets/images/section-top-slide/next-3.png")
              }
            }
            .tns-ovh {
              .tns-inner {
                .tns-slider {
                  /* each item of slider is a div named slide-item */
                  .slide-item {
                    .background-image {
                      height: 150px;
                      background: {
                        position: center 0;
                        repeat: no-repeat;
                        size: cover;
                      }
                    }
                    .slide-caption {
                      text-align: center;
                      .title {
                        font-weight: bold;
                        font-size: 16px;
                        margin-bottom: 0;
                      }
                      .link {
                        color: white;
                        background: $color-red;
                        display: inline-block;
                        padding: 2px 5px;
                        border-radius: 3px;
                        font-size: 14px;
                        font-weight: bold;
                      }
                    }
                  }
                  .slide-item.item-1 {
                    .background-image {
                      background-image: url("../src/Assets/images/section-top-slide/tot.webp")
                    }
                  }
                  .slide-item.item-2 {
                    .background-image {
                      background-image: url("../src/Assets/images/section-top-slide/arsenal.jpg")
                    }
                    .title {
                      text-shadow: 1px 1px 3px $color-red;
                    }
                  }
                  .slide-item.item-3 {
                    .background-image {
                      background-image: url("../src/Assets/images/section-top-slide/mc.jpg")
                    }
                    .title {
                      text-shadow: 1px 1px 3px #5fa5e3;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/*--- end top slide ---*/