navbar with fixed position and content with relative position
<p>This is a simple question, but I'm not quite sure about the answer.</p>

<p>Can we put a div on hidden but the content stay visible?</p>

<p>because im working on something with this</p>

<pre><code>#navigation{
   position:fixed;
   height: 50px;
}
div#slider{
    background:#ccc;
    height:400px;
    position:static;}
.invi{
    background:#000;
    position:relative;
    visibility:hidden;
    height:50px;}
.insideinvi{
    position:absolute;
    display:block;
    height:10px;
    }
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".skippage").click(function() {
    $('html, body').animate({
        scrollTop: $("#content").offset().top
    }, 300);
});
// Hide Header on on scroll down

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('&lt;div id="menu-button"&gt;' + settings.title + '&lt;/div&gt;');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button"&gt;&lt;/span&gt;');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('&lt;select style="width: 100%"/&gt;').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('&lt;option&gt;' + settings.title + '&lt;/option&gt;', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i &lt; element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('&lt;option value="' + $(this).attr('href') + '"&gt;' + indentation + element.text() + '&lt;/option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() &gt; settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() &lt;= settings.breakpoint &amp;&amp; !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });

  $("#cssmenu a").each(function() {
   var linkTitle = $(this).text();
   $(this).attr('data-title', linkTitle);
  });
});

});
})(jQuery);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,body{
 width:100%;
 height:100%;
 padding:0;
 margin:0;}
 
.IndexSection{
 font-size:2em;
 color:#ccc;
 width:100%;
}
 
div#welcome {
 height: 100vh;
 background: white;
 text-align:center;
 margin:0;
 position:relative;
}
.welcometext{
 background-color:red;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 height:70%;
 width:80%;
 float:none;
 margin:0 auto;
 text-align:center;
 position:absolute;
}
.skippage{
font-size:12px;
color:red;
 position:absolute;
 bottom:2%;
 left:50%;
 transform:translate(-50%,-2%);
}
header.navigation{
 position:fixed;
 background:#9C0;
 font-size:12px;
 height:50px;
 left: 0;
        right: 0;
        top: 0; 
 } 
div#content {
 padding-top:50px;
 height: 2000px;
 background: yellow;
}

div#slider{
 background:#ccc;
 height:400px;
 position:static;}
.invi{
 background:#000;
 position:relative;
 visibility:hidden;
 height:50px;}
.insideinvi{
 position:absolute;
 display:block;
 height:10px;
 }


@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu &gt; ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu &gt; ul {
  background: #3db2e1;
}
#cssmenu &gt; ul &gt; li {

  text-align:center;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center &gt; ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center &gt; ul &gt; li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right &gt; ul &gt; li {
  float: right;
}
#cssmenu &gt; ul &gt; li &gt; a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #3db2e1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu &gt; ul &gt; li.active &gt; a {
  color: red;
}
#cssmenu &gt; ul &gt; li:hover &gt; a,
#cssmenu &gt; ul &gt; li &gt; a:hover {
  color: #ccc;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu &gt; ul &gt; li &gt; a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #dff2fa;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu &gt; ul &gt; li:hover &gt; a::before,
#cssmenu &gt; ul &gt; li &gt; a:hover::before {
  background: red;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen &gt; ul,
#cssmenu.small-screen.align-center &gt; ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen &gt; ul &gt; li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen &gt; ul &gt; li:hover &gt; a,
#cssmenu.small-screen &gt; ul &gt; li &gt; a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen &gt; ul &gt; li &gt; a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
    &lt;title&gt;Home&lt;/title&gt;

    &lt;!-- Bootstrap --&gt;
    &lt;link rel="stylesheet" type="text/css" href="style/bootstrap/css/bootstrap.min.css"&gt;
    &lt;!-- custom --&gt;
    &lt;link rel="stylesheet" type="text/css" href="style/navigation.css"&gt;

    &lt;link rel="stylesheet" type="text/css" href="style/main.css"&gt;

  &lt;/head&gt;
&lt;body&gt;
            &lt;header class="navigation nav-down"&gt;
&lt;div id='cssmenu' class="row"&gt;
&lt;ul class="form-group"&gt;
   &lt;li class='active col-lg-2 col-sm-12'&gt;&lt;a href='#'&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li class="col-lg-2 col-sm-12"&gt;&lt;a href='#'&gt;Products&lt;/a&gt;&lt;/li&gt;
   &lt;li class="col-lg-2 col-sm-12"&gt;&lt;a href='#'&gt;3&lt;/a&gt;&lt;/li&gt;
   &lt;li class="col-lg-2 col-sm-12"&gt;&lt;a href='#'&gt;4&lt;/a&gt;&lt;/li&gt;
   &lt;li class="col-lg-2 col-sm-12"&gt;&lt;a href='#'&gt;5&lt;/a&gt;&lt;/li&gt;
   &lt;li class="col-lg-2 col-sm-12"&gt;&lt;a href='#'&gt;6&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
            &lt;/header&gt;

&lt;div id="welcome" class="IndexSection row"&gt;
            &lt;div class=" welcometext"&gt;
            welcome
            &lt;/div&gt;
    &lt;a href="#" class="skippage"&gt;Go Down&lt;/a&gt;
&lt;/div&gt;
&lt;div id="content"&gt;
    &lt;div id="slider" class="col-xs-12"&gt;
   
&lt;div class="invi"&gt;
 &lt;div class="insideinvi"&gt;2&lt;/div&gt;
 &lt;div class="insideinvi"&gt;3&lt;/div&gt;
&lt;/div&gt;
      slider
    &lt;/div&gt;
Content
&lt;/div&gt;
&lt;/body&gt;
    &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
    &lt;script src="style/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- custom --&gt;
    &lt;script src="style/main.js"&gt;&lt;/script&gt;
     &lt;script src="style/navigation.js"&gt;&lt;/script&gt;
     
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>a fixed navigation and a content which is need to be a relative position because nested div would be an absolute position to set the things in place. is that possible? or maybe some other clue?</p>

<p>change the <code>#invi</code> into relative and set the position of <code>.insideinvi</code> into a place without troubling the navigation. is that possible?</p>