為什么我的div與其他div重疊？

Question

當其他div不重疊時，我試圖在移動屏幕尺寸上做到這一點。 我無法讓div彼此保持一定的距離。 這是我的代碼：

 /* 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; } 

 <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> 

我缺少什么建議？ 這是我的JSFIDDLE> http://jsfiddle.net/57PQm/71/

Answer 1

我建議，因為您使用的是bootstrap CSS：用bootstrap元素分隔div 。 您將獲得不會在瞬間重疊的適合移動設備瀏覽的div 。 （引導程序可以正常工作了）

然后，您可以使用這些類來組織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/

Answer 2

通過將元素.main-mid ， .inner-mid ， .help-text和.button從fixed更改為relative ，我獲得了不錯的結果。

我認為這將是您探索的好途徑。

我還建議您整理代碼並使用bootstrap的網格系統，例如wolfsatyr 。

Answer 3

您需要更改所有position: fixed; position: relative; 用於當屏幕尺寸更改時可以調整大小的元素。 fixed保持<div>標簽的起始位置，並可以從此處開始縮小。 因此，當您縮小到移動屏幕時，文本的大小會導致包含它們的<div>調整大小並與下一個<div>重疊。 當改變position到relative ，所述<div>的被放置在順序，並且如果東西引起<div>被調整大小，則<div>的它后面的調整和防止重疊。

您可以通過編輯的小提琴看到它的修復： http : //jsfiddle.net/57PQm/78/