Question

我的网站上有一些页面存在问题。直到今天早上一切都很顺利，直到我到达这个页面，我无法弄明白。

我已经从我认为导致问题的页面中删除了CSS，但是如果有人想要检查它，请将其添加到此处。

看起来一切正常，直到我为内容框添加样式，然后它就像有一个边距或一些定位接管并在页面下方的内容框后面移动标题中的滑块。

正如您在屏幕截图中看到的那样，内容框位于滑块/标题的顶部，但不应该。只有在我添加CSS来定位和格式化内容框时才会这样做。下面的CSS

＆＃13;

.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%;
    
}

＆＃13;

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

Home page with similar setup

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

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

更多信息只是询问，我会提供。

非常感谢，

PhilB

Answer 1

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

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

滑块功能似乎打破了我的网页上的html / CSS

1 个答案: