jquery - slider 功能似乎破坏了我网页上的 html/CSS

Question

我网站上的某个页面一直存在一些问题。直到今天早上，一切都运行良好，直到我到达此页面，但我无法弄清楚。

The page in question

我已经从我认为导致问题的页面中删除了 CSS，但我会在此处添加它以防有人想检查它。

似乎一切正常，直到我为内容框添加样式，然后它就像有一个边距或一些定位接管并将页眉中的 slider 向下移动到内容框后面。

Where it should be Where it actually is

如您在屏幕截图中所见，内容框位于 slider /页眉的顶部，而本不应如此。只有在我添加 CSS 来定位和格式化内容框后，它才会执行此操作。下面的 CSS

.box img {
    position: relative;
    top: 40%;
    left: 40%;
}

.box .qfont{
      position: absolute;
top: 25%;    left: 45%;
    font-size: 82px;
    color: #424545;
    opacity: 0.9;

}
/*Initial settings for the box container*/

.fl-module-content {
    margin: 1%;
}
.box {
  margin: auto;
  cursor: pointer;
  height: 340px;
  position: relative;
  overflow: hidden;
  width: 99%;
}
/*Position icons towards the center and bottom of the box, done this way otherwise the buttons appear uneven*/
.box .fa {
    position: absolute;
    bottom: 3%;
    left: 50%;
    font-size: 48px;
}
/*.box .dashicons, .box .dashicons-before:before  {
    position: absolute;
    bottom: 10%;
    left: 40%;
    font-size: 48px;
}*/
.box i[class^="quad"] {
      position: absolute;
    bottom: 10%;
    left: 50%;
    font-size: 52px;

}
.box .fa {
    color: #009933;
     position: absolute;
    top: 10%;
    left: 40%;
    font-size: 52px;

}
/*SPosition the header*/
.box h2 {
  position: absolute;
  font-size: 38px;
  width: 99%;
  top: 1%;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  text-align: center;
  
}
/*Position the Paragraph*/
.box p{
      text-align: center;
    position: relative;
    top: 60%;
    padding: 3%;
    padding-top: 0;
}
/*apply styles and centre the text of the hidden content*/
.box .overbox p {
    text-align: center;
    color: #424545;
    font-size: 16px;
      overflow: hidden;

}
/*styles for the hidden content container and hides the content*/
.box .overbox {
    border-radius: 5px;
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  color: #424545;
  z-index: 10;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 100%;
  height: 340px;
    padding: 30px 20px;


    
}

/*restores opacity on mouse over, displaying the main container for the hidden content*/
.box:hover .overbox { opacity: 1; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
  height: 90%;
}
/*hides the remaining content until roll over*/
.box .title {
  font-size: 16px;
  text-transform: none;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  height: 90%;
}
/*Restore hidden content on mouse over*/
.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
/*hides the button*/
.overbox .tagline {
  font-size: 0.8em;
  color:#fff;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}
/*restore the button*/
.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
  color: #fff;
}
.btn-primary {
    border-style: none;
}
.box a:hover, a:focus {
    text-decoration: none;
}
/*button is built on bootstrap CSS, most of the styles for dimensions and responsiveness are in bootstrap file. 
We just change the colour and position it to the bottom of its container*/
.box .overbox .btn-primary {
    position: relative;
    bottom: 0;
    background-color: #9e3039;
    color: #fff;
    border-style: none;
    left: 80%;

} 
/*Change the link hover effect so the text is white.*/
.box .overbox .btn-primary a, a:hover {
    color: #fff;
}
.box .overbox p {
          text-align: center;
    position: absolute;
    top: 5%;
    padding: 3%;
    padding-top: 0;
    
}

.box .overbox ul, li {
    position: relative;
    top: 50%;
    left: 1%;
    
}

仅供引用，这是一个 WordPress 网站，我正在使用 Beaver Builder 制作页面，我倾向于认为这是一个主题问题，但我在其他一些有效的页面上也有类似的设置

Home page with similar setup

我接受布局略有不同，但 CSS 几乎相同，只是一些不同的尺寸和轻微的元素定位占用了更多的屏幕空间。

有人有想法吗？我已经多次阅读代码，现在看起来都一样了，所以如果有人能指出我正确的方向，或者提供一些建议，我将不胜感激。我暂时移到另一个页面，以免有人在看它时影响它。

任何更多信息只需询问，我会提供。

非常感谢，

菲尔布

Answer 1

请在您的代码中添加以下样式。

.soliloquy-item{
    top: 0;
    left: 0;
}