Question

我需要帮助。我们网站上的我的DIV标签在position: fixed {我}无法找到解决方案时会重叠。我试图让它成为我的搜索栏与我的jQuery侧边栏不重叠。

代码：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

将此CSS添加到样式表（<style></style>标记之间）：

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

如果窗口宽度小于500px，这将通过为搜索栏元素指定不同的样式来解决您的问题。但是，你的整个CSS编码都有些疯狂，你应该完全重写它。使用位置固定是非常糟糕的主意。无论如何，这可以解决您的问题，而无需重写代码。

如果需要，您可能需要将90px的值调整为其他值，例如95px或100px左右。我无法完美地测试这个，因为我没有在页面上加载所有图像，因此某些元素的宽度对我来说可能有点不同。

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

1 个答案: