stackoom
  简体   繁体   中英

My Divs are overlapping on window resize

 原文  2015-01-31 07:26:50  9   1    jquery/ html/ css/ css3/ size

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. I'm trying to make it so that my search bar does not overlap with my jQuery sidebar.

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

1 answers

solution1
 0  2015-02-01 07:57:12

Add this CSS to your stylesheet (between <style></style> tags): 

@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. However, your entire CSS coding is somehow mad and you should rewrite it entirely. 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. 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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Bootstrap div overlapping on window resize Jquery Resizable: Prevent overlapping divs on Resize Animating Multiple Divs On Window Resize Move divs around on window resize with if then Resize divs on page load and window resize How to dynamically resize 3 divs on window.resize? Resizing divs on window resize using AngularJS Resize two DIVs Relative to Window Size resize divs to auto and then to same height as one another upon window resize? How to make script resize images and divs on window resize and orientation change
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM