Почему мой div перекрывает другие divs?

Я пытаюсь сделать это так на экране мобильного экрана, когда в ландшафте другие divs не перекрываются. Я не могу получить div, чтобы оставаться в определенном пространстве друг от друга. вот мой код:Почему мой div перекрывает другие divs?

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

источник

2015-12-28 KstreakOG

Что ДИВ обеспокоен этой проблемой, что должно выглядеть? – CoderPi

@CodeiSir Это основные divs с классом inner_mid main_mid и пожертвовать эти перекрытия в мобильном ландшафтном представлении. – KstreakOG

Во-первых, ставить скрипт до того, как doctype не только недействителен, он помещает вашу страницу в режим «quirks». Поместите это, где оно принадлежит, либо в голову, либо внизу страницы перед закрывающим тегом тела. Ваш элемент title также должен находиться в голове. – Rob

Вам необходимо изменить все position: fixed; на position: relative; для элементов, размер которых может быть изменен при изменении размера экрана. fixed поддерживает исходное положение тега <div> и может расти и сокращаться оттуда. Таким образом, при сжатии на экране мобильного телефона размер текста, который у вас есть, вызывает <div>, который содержит их для изменения размера и перекрытия следующего <div>. Когда вы меняете position на relative, <div> размещаются под заказ, и если что-то вызывает изменение размера <div>, то следующие <div> корректируются и предотвращают перекрытие.

Вы можете видеть, что фиксируется с отредактированной скрипкой: http://jsfiddle.net/57PQm/78/

источник

2015-12-29 14:58:28

да, но в мобильном случае, если бы я хотел, чтобы divs прокручивали, я не должен был менять его на абсолютную позицию для прокрутки – KstreakOG

Я предположил бы, что так как вы использовать загрузочный CSS: Отделить div «ы с бутстраповских элементами. Вы получите мобильный телефон div, который не будет перекрываться в одно мгновение. (Bootstrap может затем работать это волшебство)

Тогда вы можете организовать div «S с этими классами (Basic пример):

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

источник

2015-12-28 20:39:03 Doomsy

Я не понимаю, что вы получаете? – KstreakOG

** «Я пытаюсь сделать это так на экране мобильного экрана, когда в ландшафте другие divs не перекрываются. Я не могу заставить Div's оставаться в определенном пространстве друг от друга."** Я говорю, если вы используете bootstrap css, вы можете использовать элементы bootstrap, чтобы ваши divs идеально вписывались в экран на всех устройствах. Загрузите здесь: http://getbootstrap.com/getting-started/ #download и дайте мне знать, если вам нужна дополнительная помощь. – Doomsy

я получал хорошие результаты за счет изменения положения элементов .main-mid, .inner-mid, .help-text и .button от fixed до relative.

Я думаю, что это была бы хорошая возможность для вас исследовать.

Я также предлагаю убрать код и использовать систему сетки бутстрапа, например, wolfsatyr.

источник

2015-12-29 02:35:06 chuckn246

Почему мой div перекрывает другие divs?

ответ

Смежные вопросы