title: Flexslider fullscreen BG fade-in effect hides div
body: <p>I'll start with the fade-in effect where the touch works perfect and the images change responsively on swipe - BUT - the div container i have my site in, gets sent to the background and not in front of the image.</p>
  
  <p>I am trying to use flexslider as a Fullscreen background slider with touch. Here is my code, if anyone would please lend a helping hand.</p>
  
  <p>Regards, G</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="flexslider"&gt;
  &lt;ul class="slides"&gt;
  &lt;li&gt;
    &lt;img src="images/b3.jpg" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="images/b4.jpg" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="images/b6.jpg" /&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="mainContainer2"&gt;
  
  TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT.
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>/* CSS Document */
  *{margin:0;paddding:0}
  
  html, body {
  font-size: 12px;
  margin:0;
  paddding:0;
  }
  
  #mainContainer2 {
  margin: auto;
  width: 1000px;
  height: 655px;
  position:relative;
  }
  
  /* Browser Resets */
  .flex-container a:active,
  .flexslider a:active,
  .flex-container a:focus,
  .flexslider a:focus {outline: none;}
  .slides,
  .flex-control-nav,
  .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
  
  /* FlexSlider Necessary Styles
  *********************************/
  .flexslider { width:100%; height: 100%; margin: 0; padding: 0; position:absolute;}
  .flexslider .slides &gt; li {display: none; -webkit-backface-visibility: hidden;} /* Hide     the slides before the JS is loaded. Avoids image jumping */
  .flexslider .slides img {width: 100%; }
  .flex-pauseplay span {text-transform: capitalize;}
  
  /* Clearfix for the .slides element */
  .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
  html[xmlns] .slides {display: block;}
  
      html .slides {height: 1%;}
  
  /* No JavaScript Fallback /
  / If you are not using another script, such as Modernizr, make sure you
  
      include js that eliminates this class on page load */ .no-js .slides &gt; li:first-child {display: block;}
  
  /* FlexSlider Default Theme
  *********************************/
  .flexslider {margin: 0 0 60px; position:absolute; zoom: 1;}
  .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
  .loading .flex-viewport {max-height: 300px;}
  .flexslider .slides {zoom: 1;}
  
  .carousel li {margin-right: 5px}
  
  /* Direction Nav */
  .flex-direction-nav {*height: 0;}
  .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block;     background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
  .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
  .flex-direction-nav .flex-prev {left: -36px;}
  .flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
  .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
  .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
  .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30);     cursor: default;}
  
  /* Control Nav */
  .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
  .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
  .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
  .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
  .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
  
  .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
  .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
  .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
  .flex-control-thumbs img:hover {opacity: 1;}
  .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
  </code></pre>