为什么我的div与其他div重叠？

时间：2015-12-28 20:33:26

标签： html css

我试图在横向移动屏幕尺寸上实现这一点，其他div不重叠。 我不能让div在彼此远离某个空间的地方。 这是我的代码：

＆＃13;
＆＃13; 
/* Main Section */

html,
body {
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
  width: auto;
  height: auto;
}
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: visible;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}
.fullscreen-bg__video {
  position: fixed;
  top: 0;
  left: 0;
}
@media (max-width: 1200px) {
  .fullscreen-bg {
    background: url('https://i.gyazo.com/fbb65627e5fe8a07b7d4b9d41db47e34.png') center center / cover no-repeat;
  }
  .fullscreen-bg__video {
    display: none;
  }
}
/* Navigation Bar */

.navbar {
  background-color: transparent;
  border-radius: none;
  margin: 0 auto;
  height: auto;
  position: fixed;
  padding-bottom: 50px;
}
@media screen and (max-device-width: 1200px) and (orientation: landscape) {
  .navbar {
    padding-bottom: 30px;
  }
}
.navigation-main {
  font-size: 28px;
  font-weight: bold;
  float: right;
  margin-top: 25px;
  margin-right: 30px;
  list-style-type: none;
}
@media all and (max-width: 1000px) {
  .navigation-main {
    font-size: 28px;
  }
}
.navigation-main li {
  float: left;
  margin-right: 20px;
}
.navigation-main li a {
  color: DodgerBlue;
  text-decoration: none;
  font-family: "Lobster";
}
ul.nav li a:hover {
  background-color: transparent;
}
.navigation-main ul {
  display: block;
}
.navigation-main a.active {
  color: lightgreen;
  font-family: "Lobster";
  font-size: 30px;
}
.main_nav {
  padding-top: 10px;
}
.navigation-main a.donate {
  box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  -o-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  background-color: #9ea517;
  padding: 20px 18px!important;
  color: #fff!important;
  border-radius: 2px 2px 2px 2px;
  font-family: 'Aclonica';
  font-size: 28px;
  letter-spacing: 1px!important;
}
.hvr-grow-rotate {
  background-color: #9ea517;
}
img {
  height: 80px;
}
@media only screen and (max-width: 1200px) {
  img {
    display: none;
  }
}
/* NAVIGATION END!! */

/* Middle Section */

.main_mid {
  color: white;
  text-shadow: 10px 10px 10px black;
  text-align: center;
  font-family: "Luckiest Guy";
  font-weight: 900;
  margin: 0;
  left: 0;
  line-height: 200px;
  margin: auto;
  margin-top: -100px;
  position: fixed;
  top: 50%;
  width: 100%;
  font-size: 100px;
  overflow: hidden;
}
@media all and (max-width: 1200px) {
  .main_mid {
    font-size: 90px;
  }
}
.inner_mid {
  color: white;
  display: none;
  text-shadow: 10px 10px 10px black;
  text-align: center;
  font-family: "Luckiest Guy";
  overflow: hidden;
  font-weight: 900;
  margin: 0;
  left: 0;
  margin: auto;
  margin-top: -100px;
  position: fixed;
  top: 50%;
  width: 100%;
  font-size: 100px;
}
@media all and (max-width: 1200px) {
  .inner_mid {
    font-size: 90px;
  }
}
@media screen and (max-width: 1200px) and (orientation: landscape) {
  .inner_mid {
    margin-top: 0 auto;
  }
}
.help_text {
  position: fixed;
  color: white;
  display: none;
  text-shadow: 10px 10px 10px black;
  text-align: center;
  font-family: "Luckiest Guy";
  overflow: hidden;
  font-weight: 900;
  margin: 0;
  left: 0;
  margin: auto;
  top: 60%;
  width: 100%;
  font-size: 50px;
}
@media all and (max-device-width: 1200px) and (orientation: landscape) {
  .help_text {
    line-height: 300px;
    margin-top: -50px;
    margin-bottom: 50px;
  }
}
#button {
  overflow: hidden;
  top: 50%;
  width: 100%;
  display: none;
  text-align: center;
  margin-bottom: 50px;
  vertical-align: middle;
  background-color: transparent;
}
@media screen and (max-device-width: 1200px) {
  #button {
    padding-bottom: 35px;
  }
}
.button:hover {
  color: dodgerblue;
}
.button {
  position: fixed;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  -o-box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset;
  transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  background-color: orange;
  padding: 20px 18px!important;
  border-radius: 2px 2px 2px 2px;
  font-family: 'Aclonica';
  font-size: 28px;
  letter-spacing: 1px!important;
}
@media all and (max-width: 800px) {
  .button {
    height: 50px;
    width: 50px;
    font-family: 'Aclonica';
  }
}
a.button {
  list-style-type: none;
  text-decoration: none;
  background-color: red;
}
a.button:hover {
  color: black;
  list-style-type: none;
  text-decoration: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<title>BEMC | Home</title>

<head>
  <!-- Links -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.0/animate.min.css">
  <link rel="stylesheet" type="text/css" href="B_hover.css">
  <link rel="stylesheet" href="styles.css">

  <!-- Bootstrap Links -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.5/release/featherlight.min.css" type="text/css" rel="stylesheet" />
  <script src="//code.jquery.com/jquery-latest.js"></script>
  <script src="//cdn.rawgit.com/noelboss/featherlight/1.3.5/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- Random -->

  <link rel="stylesheet" href="http://www.w3schools.com/w3css/w3.css">
  <link rel="stylesheet" type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.js">
  <link rel="stylesheet" type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.0.2/css/hover-min.css">
  <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.css" type="text/css" rel="stylesheet" />

  <!-- Fonts -->

  <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Fontdiner+Swanky|Slackey' rel='stylesheet' type='text/css'>
  <link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy" rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>
</head>


<!-- bxSlider CSS file -->
<link href="/GalleryPlugins/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
  $(function() {

    // note that this doens't call hide   
    $('.inner_mid').delay(3000).fadeIn('slow');

    $('#button').delay(3000).fadeIn('slow');

    $('.help_text').delay(3000).fadeIn('slow');
  });
</script>

<body>
  <div class="fullscreen-bg">
    <video loop muted autoplay poster="https://i.gyazo.com/fbb65627e5fe8a07b7d4b9d41db47e34.png" class="fullscreen-bg__video">
      <source src="Timelapse_star_sky_FULLHD_Free_background_video_ef.webm" type="video/webm">
        <source src="Timelapse_star_sky_FULLHD_Free_background_video_ef.mp4" type="video/mp4">
          <source src="Timelapse_star_sky_FULLHD_Free_background_video_ef.ogg" type="video/ogg">
    </video>
  </div>
  <nav class="navbar">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="navigation-main nav navbar-right">
          <li class="B_underline_left "><a href="# hvr-underline-from-center">Home</a>
          </li>
          <li class="active hvr-underline-from-center"><a href="Gallery.php">Gallery</a>
          </li>
          <li class="hvr-underline-from-center"><a href="contact.php">Contact Us</a>
          </li>
          <li class="hvr-underline-from-center"><a href="History.php">History</a>
          </li>
          <li><a class="donate hvr-grow-rotate hvr-shutter-out-vertical hvr-buzz hvr-pulse" href="">Donate</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <div class="container-fluid">
    <div class="wrapper">
      <p class="animated flash bounceOut main_mid">Gallery</p>
      <p class="animated shake flash inner_mid">Coming Soon...</p>
      <p class="help_text">Help us by donating!</p>
      <div id="button">
        <a href="#" class="button hvr-grow-rotate hvr-shutter-out-vertical hvr-buzz hvr-pulse" role="button">Donate</a>
      </div>
    </div>
  </div>
</body>
<!-- bxSlider Javascript file -->
<script src="/GalleryPlugins/jquery.bxslider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


</html>
＆＃13;
＆＃13;
＆＃13;

我错过了什么建议？ 这是我的JSFIDDLE＆gt; http://jsfiddle.net/57PQm/71/

3 个答案:

答案 0 :(得分：0)

我建议你自己使用bootstrap CSS：用引导元素分隔你的div。您将获得不会在瞬间重叠的移动设备div。 （Bootstrap然后可以使用它的魔力）

然后，您可以使用这些课程组织div（基本示例）：

<div class="col-md-12">

    <div class="col-md-4">
        One
    </div>

    <div class="col-md-4">
        Two
    </div>

    <div class="col-md-4">
        Three
    </div>

</div>

使用此作为参考： https://getbootstrap.com/examples/grid/ 或这个： https://bootstrapdocs.com 或这个： http://www.w3schools.com/bootstrap/

答案 1 :(得分：0)

通过将元素.main-mid，.inner-mid，.help-text和.button的位置从fixed更改为relative，我获得了良好的效果。

我认为这对你来说是一个很好的途径。

我还建议整理你的代码并使用bootstrap的网格系统，如wolfsatyr提到的。

答案 2 :(得分：0)

您需要将所有position: fixed;更改为position: relative;，以便在屏幕尺寸更改时可以调整大小。 fixed维护<div>代码的起始位置，可以从那里开始增长和缩小。因此，当您缩小到移动设备屏幕时，您拥有的文字大小会导致包含它们的<div>调整大小并与下一个<div>重叠。当您将position更改为relative时，<div>会按顺序排列，如果某些内容导致<div>调整大小，那么{{跟随它的1}}被调整并防止重叠。

您可以通过编辑过的小提琴看到它：http://jsfiddle.net/57PQm/78/

相关问题
最新问题