我的Divs在窗口调整大小上重叠

Question

I need help. 我需要帮助。 My DIV tags on my website are overlapping when they're both position: fixed and I can't find a solution. 当我的网站上的DIV标签处于相同position: fixed时，它们是重叠的position: fixed ，我找不到解决方案。 I'm trying to make it so that my search bar does not overlap with my jQuery sidebar. 我正在尝试使其不与我的jQuery边栏重叠。

CODE: HTML: 代码：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>

Answer 1

Add this CSS to your stylesheet (between <style></style> tags): 将此CSS添加到样式表中（在<style></style>标记之间）：

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

This will fix your problem by specifying different styles for your search bar element if window is less than 500px wide. 如果窗口的宽度小于500像素，则可以通过为搜索栏元素指定不同的样式来解决您的问题。 However, your entire CSS coding is somehow mad and you should rewrite it entirely. 但是，您的整个CSS编码有些疯狂，您应该完全重写它。 Using position-fixed is very bad idea. 使用固定位置是非常糟糕的主意。 Anyway, this fixes your problem without rewriting the code. 无论如何，这无需修改代码即可解决您的问题。

You may need to adjust the value of 90px to something else, like 95px or 100px or so, if necessary. 如有必要，您可能需要将90px的值调整为其他值，例如95px或100px左右。 I cannot test this perfectly because I don't have all the images you are loading on the page thus width of some elements may be a bit different for me. 我无法对此进行完美的测试，因为我没有在页面上加载的所有图像，因此某些元素的宽度对我来说可能有些不同。

我的Divs在窗口调整大小上重叠

问题描述

1 个解决方案

解决方案1
0 2015-02-01 07:57:12

我的Divs在窗口调整大小上重叠

问题描述

1 个解决方案

解决方案1 0 2015-02-01 07:57:12

解决方案1
0 2015-02-01 07:57:12