Мои Divs перекрываются при изменении размера окна

Мне нужна помощь. Мои теги DIV на моем сайте перекрываются, когда они оба - position: fixed, и я не могу найти решение. Я пытаюсь сделать так, чтобы моя панель поиска не перекрывалась со своей боковой панелью jQuery.Мои Divs перекрываются при изменении размера окна

КОД: HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Morphing Sidebar Navigation Demo</title> 

<link href="normalize.css" rel="stylesheet" 
type="text/css"> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
<style class="cp-pen-styles"> 
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic); 

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 


html, 
body { 
     z-index: -3; 
    padding: 0px; 
    margin: auto; 
     margin: 0; 


    background-color: #bdc3c7; 
height: 1000px; 
    width: 100%; 
    background: #efefef; 
    font-family: 'Roboto Condensed', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

#main-nav { 
    z-index: 2; 
    width: 300px; 
    height: 100%; 
    position: fixed; 
    overflow: hidden; 
    -webkit-transition: background 0.2s ease-in-out; 
    transition: background 0.2s ease-in-out; 
} 

#main-nav.show { background: #d8dbdb; } 

#nav-button { 

    height: 3em; 
    width: 3em; 
    border-radius: 50%; 
    top: 7em; 
    left: 1em; 
    position: relative; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    color: #444; 
    -webkit-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    overflow: hidden; 
    background-color: #DBDBDB; 
    z-index: 5; 
    margin-right: 50px; 
} 

#nav-button .fa { 
    position: absolute; 
    top: 0; 
    left: 0.2em; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    display: block; 
    width: 1em; 
    height: 1em; 
    font-size: 1.5em; 
    opacity: 1; 
    -webkit-transition: opacity 0.4s ease-in-out; 
    transition: opacity 0.4s ease-in-out; 
    z-index: 5; 
} 

#nav-button:hover { 
    cursor: pointer; 

    color: #222; 
} 

#nav-button.width { 
    width: 80em; 
    height: 80em; 
    top: -37.5em; 
    left: -37.5em; 
    box-shadow: none; 
} 

#nav-button.width:before { 
    content: ''; 
    display: block; 
    width: 0.8em; 
    height: 0.8em; 
    border-radius: 50%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    -webkit-animation: color 0.3s linear; 
    animation: color 0.3s linear; 
} 
@-webkit-keyframes 
color { 0% { 
box-shadow: 0; 
} 
30% { 
box-shadow: 0 0 10px 25px rgba(12, 121, 137, 0.5); 
/* feather/spread */ 
} 
} 
@keyframes 
color { 0% { 
box-shadow: 0; 
} 
30% { 
box-shadow: 0 0 10px 25px rgba(12, 121, 137, 0.5); 
/* feather/spread */ 
} 
} 

/*@keyframes curve { 
    0% { 
     transform: rotate(0deg) 
        translate(0px) 
        rotate(0deg); 
    } 
    100% { 
     transform: rotate(60deg) 
        translate(200px) 
        rotate(-60deg); 
    } 
}*/ 

#nav-list { 
    position: absolute; 
    top: 171px; 
    padding: 0 0 0 2em; 
    opacity: 0; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
    width: 100%; 
    left: 1px; 
    z-index: 6; 
} 

#nav-list a { 
    color: #444; 
    text-decoration: none; 
    font-size: 0.9em; 
    display: block; 
    width: 100%; 
    padding: 1.2em 0; 
    -webkit-transition: color 0.2s ease-in-out; 
    transition: color 0.2s ease-in-out; 
} 

#nav-list a:hover { color: #111; } 

#nav-list.nav-show { opacity: 1; } 

#content { 
    background: #efefef; 
    height: 100%; 
    position: relative; 
    -webkit-transition: background 0.4s ease-in-out; 
    transition: background 0.4s ease-in-out; 
} 

#content header { 
    height: 15em; 
    background: #44769a; 
    width: 100%; 
    padding: 1.7em 0 0 0; 
} 

#content header h1 { 
    color: #fff; 
    letter-spacing: 0.03em; 
    font-size: 1.4em; 
    width: 75%; 
    margin: 0 auto; 
} 

#content section { 
    height: 60em; 
    background: #fff; 
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); 
    width: 75%; 
    margin: -10em auto 0; 
} 

#cover { 
    opacity: 0; 
    visibility: hidden; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
} 

#cover.display { 
    background: rgba(0, 0, 0, 0.2); 
    opacity: 1; 
    visibility: visible; 
} 

.HeaderArea { 
    line-height: 100px; 
    text-align: center; 
    background-color: #00B0FF; 
    vertical-align:middle 
    height: 113px; 
    width: 100%; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    position: fixed; 
    font-family: Impact; 
    font-size: 50px; 
    color: #FFF; 
    z-index: 2; 
} 
.UtilityBarArea { 
    top:100px; 
    background-color: #dbdbdb; 
    height: 69px; 
    width: 100%; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    position: fixed; 
    background-repeat: no-repeat; 
    background-position: center; 
    z-index: 2; 
} 
#UtilityBarAreaSearch { 
    top:100px; 
    height:54px; 
    width: 300px; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    position: fixed; 
    padding-top: 20px; 

left: 50%; 
margin-left: -150px; 


    z-index: 2; 
} 
/* div container containing the form */ 
#searchContainer { 
    margin:20px; 
} 
/* Style the search input field. */ 
#field { 
    float:left; 
    width:200px; 
    height:31px; 
    line-height:27px; 
    text-indent:10px; 
    font-family:arial, sans-serif; 
    font-size:1em; 
    color:#333; 
    background: #fff; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: solid; 
    border-right-style: none; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #c0c0c0; 
    border-right-color: #d9d9d9; 
    border-bottom-color: #d9d9d9; 
    border-left-color: #d9d9d9; 
} 
/* Style the "X" text button next to the search input field */ 
#delete { 
    float:left; 
    width:16px; 
    height:29px; 
    line-height:27px; 
    margin-right:15px; 
    padding:0 10px 0 10px; 
    font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif; 
    font-size:22px; 
    background: #fff; 
    border:solid 1px #d9d9d9; 
    border-top:solid 1px #c0c0c0; 
    border-left:none; 
} 
/* Set default state of "X" and hide it */ 
#delete #x { 
    color:#A1B9ED; 
    cursor:pointer; 
    display:none; 
} 
/* Set the hover state of "X" */ 
#delete #x:hover { 
    color:#36c; 
} 
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */ 
#submit { 

    cursor:pointer; 
    width:30px; 
    height: 31px; 
    line-height:0; 
    font-size:0; 
    text-indent:-999px; 
    color: transparent; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    background-image: url(PIC/SEARCHICON.png); 
    background-repeat: no-repeat; 
    background-size: 25px, 25px; 
    background-position: center; 
    background-color: #EBF0F1; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
} 
/* Style the search button hover state */ 
#submit:hover { 
    background: url(ico-search.png) no-repeat center #357AE8; 
    border: 1px solid #2F5BB7; 
    height: 27px; 
} 
/* Clear floats */ 
.fclear {clear:both} 


.BODYCONTENTMIDDLE { 
    background-size: 100%, 100px; 
    z-index: 1; 
    height: 10000px; 
    width: 80%; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    position: relative; 
    top: 200px; 
    margin:auto; 

    background-image: url(PIC/CAR.png); 

    background-repeat: no-repeat; 

} 
</style> 
<title>Untitled Document</title> 
     <script> 

$('#nav-button').click(function(){ 
    $(this).toggleClass('width'); 
    $(this).parent().toggleClass('show'); 
    $(this).children().toggleClass('fa-navicon').toggleClass('fa-close'); 
    $('#nav-list').toggleClass('nav-show'); $('#cover').toggleClass('display'); 
}); 
     </script> 

</head> 

<body> 
<div id="cover"></div> 
<div class="HeaderArea">Caast</div> 
<div class="UtilityBarArea"> 
<div id="UtilityBarAreaSearch"> 
<form> 
     <input id="field" name="field" type="text" /> 
     <input id="submit" name="submit" type="submit" value="Search" /> 
    </form> 
</div> 
</div> 

<nav id="main-nav"> 
    <div id="nav-button"><span class="fa fa-navicon"></span></div> 
    <ul id="nav-list"> 
    <li><a href="https://www.google.com">Nav Item 1</a></li> 
    <li><a href="#">Nav Item 2</a></li> 
    <li><a href="#">Nav Item 3</a></li> 
    <li><a href="#">Nav Item 4</a></li> 
    </ul> 
</nav> 







<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script> 
// My poor javascript skillz. 
$('#nav-button').click(function(){ 
    $(this).toggleClass('width'); 
    $(this).parent().toggleClass('show'); 
    $(this).children().toggleClass('fa-navicon').toggleClass('fa-close'); 
    $('#nav-list').toggleClass('nav-show'); $('#cover').toggleClass('display'); 
}); 
</script> 
<script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-36251023-1']); 
    _gaq.push(['_setDomainName', 'jqueryscript.net']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 
<div class="BODYCONTENTMIDDLE">Content for cl</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // if text input field value is not empty show the "X" button 
    $("#field").keyup(function() { 
     $("#x").fadeIn(); 
     if ($.trim($("#field").val()) == "") { 
      $("#x").fadeOut(); 
     } 
    }); 
    // on click of "X", delete input field value and hide "X" 
    $("#x").click(function() { 
     $("#field").val(""); 
     $(this).hide(); 
    }); 
}); 
</script> 
</body> 
</html>

источник

2015-01-31 Larry Navarro

Какой из плюсов перекрывает? Предоставить ID –

Лучше предоставить снимок экрана о том, как вы хотите, чтобы он отображался, если не перекрывался. –

используйте 'max-height' и' max-widht' для этого –

Добавить CSS в таблицу стилей (между <style></style> теги):

@media(max-width: 500px) 
{ 
    #UtilityBarAreaSearch 
    { 
     left: 90px !important; 
     margin-left: 0px !important; 
    } 
}

Это позволит устранить вашу проблему, указав различные стили для вашего бара элемента поиска, если окно составляет менее 500 пикселей. Однако вся ваша CSS-кодировка как-то безумна, и вы должны полностью ее переписать. Использование фиксированной позиции - очень плохая идея. Во всяком случае, это исправляет вашу проблему без перезаписи кода.

Возможно, вам потребуется изменить значение 90px на что-то другое, например 95px или 100px или около того, если необходимо. Я не могу проверить это полностью, потому что у меня нет всех изображений, которые вы загружаете на странице, поэтому ширина некоторых элементов может немного отличаться для меня.

источник

2015-02-01 07:57:12

Мои Divs перекрываются при изменении размера окна

ответ

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