CSS positioning

by Alexandru Gatea

HTML

<div class="tut">
  <p>
 Click on nav elements to check absolute and relative positioning.
  </p>
  <button>
  ok
  </button>
</div>

<ul class="nav">
  <li class="nav-elem nr active">No "relative" parents</li>
  <li class="nav-elem mr">First parent "relative"</li>
  <li class="nav-elem sr">Second parent "relative"</li>
</ul>

<div class="main-parent parent">
  <p>Main Parent</p>
  <div class="secondary-parent parent">
    <p>Secondary Parent</p>
    <div class="absolute-elem">
      I am Absolute!
    </div>
  </div>
</div>
<div class="random">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in metus ligula. Ut elementum pharetra urna, vitae eleifend risus laoreet sagittis. Nullam placerat massa id odio ornare ultrices. Quisque aliquam mattis dictum. Suspendisse potenti. Donec
  molestie at nunc rhoncus elementum. Morbi vitae quam luctus, euismod purus quis, laoreet eros. Donec in elementum sapien, in facilisis augue. Nulla dictum libero turpis, eget mollis metus viverra at. Sed sit amet lacus nunc. Nunc eget urna id tortor
  varius aliquam. Suspendisse lectus urna, tincidunt ut ligula vitae, viverra porta libero. Integer lacinia sapien at tellus malesuada convallis. Vestibulum luctus nec massa non accumsan. Sed nec sem vel metus facilisis dignissim. Aenean turpis arcu,
  facilisis at bibendum quis, dignissim eu neque. Integer auctor pulvinar tempor. Curabitur gravida nulla id tristique laoreet. Sed non diam sit amet mauris pharetra finibus. Sed velit metus, euismod quis iaculis eu, finibus at lacus. Donec faucibus quam
  elit, nec rutrum ligula fringilla porta. Duis molestie efficitur purus, nec porta arcu elementum a. Quisque id sapien vel ante tempor efficitur non sit amet nisi. Maecenas bibendum ornare dolor, at vulputate lacus molestie et. Nunc tempus mauris non
  magna facilisis, sit amet varius erat condimentum. Praesent interdum tortor vitae nunc consequat mattis. Nam iaculis est ut ultricies auctor. Duis sed eros ac tortor ullamcorper...

CSS

* {
  margin: 0;
  padding: 0;
}

.tut {
  position:fixed;
  width:100%;
  height: 100vw;
  background: rgba(0,0,0,0.8);
  z-index:1000;
  padding: 25vh 0;
  text-align:center;
  color: #fff;
  transition:all 0.3s ease;
}
.tut p {
  max-width:200px;
  margin:0 auto 30px;
}
.tut button{
  padding: 5px 25px;
  
}


body {
  background: #f8f8f8;
  height: 200vh;
}

.nav {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  text-align: right;
}

.nav .nav-elem {
  display: inline-block;
  font-size: 12px;
  padding: 10px;
  background: #212121;
  color: #f5f5f5;
  cursor: pointer;
}

.nav .nav-elem:hover {
  background: #616161;
}

.nav .nav-elem.active {
  background: #ff5500;
}

.main-parent {
  display: block;
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #212121;
  background:#ccc;
}

.secondary-parent {
  display: block;
  width: 160px;
  height: 140px;
  padding: 20px;
  border: 1px solid #212121;
  background:#f8f8f8;
}

p {
  line-height: 20px;
}

.absolute-elem {
  position: absolute;
  top: 0;
  left: 0; 
  background: #445566;
  width: 80px;
  height: 80px;
  color: #fff;
  font-size: 12px;
  line-height: 80px;
  text-align: center;
  opacity: 0.8;
}

.fixed-elem {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 70px;
  height: 70px;
  font-size: 12px;
  text-align: center;
  line-height: 70px;
  background: #33ff33;
  color: #fff;
  border-radius: 50%;
  box-shadow:
}

.random {
  margin-top: 20px;
  font-size: 12px;
  color: #999;
  line-height: 1.7;
  padding: 20px;
}

body.dead * {opacity:0;}

body.dead{
  height:100vh;
  width:100%;
  background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/320300-200.png');
  background-position:center center;
  background-size:150px 150px;
  background-repeat:no-repeat;
  opacity:0.5;
}

JavaScript

jQuery(document).ready(function($) {
  var ME = $('.main-parent');
  var SE = $('.main-parent');
  var i = 0;
  $(document).on('click', function(){
  	i++
    if (i == 5) {
    alert('Wtf dude? Stopp clicking!');
    } else if (i == 7) {
    	alert('One click left')
    } else if (i == 8) {
    	$("body").addClass("dead");
      setTimeout(function() {
      	alert("Hahaha! I'm done with you!")
      }, 1000);
    }
  });
  
  

  $('.nr').on('click', function() {
    $('.parent').css('position', 'static');
  });

  $('.mr').on('click', function() {
    $('.parent').css('position', 'static');
    $('.main-parent').css('position', 'relative');
  });

  $('.sr').on('click', function() {
    $('.parent').css('position', 'static');
    $('.secondary-parent').css('position', 'relative');
  });

  $('.nav-elem').on('click', function() {
    $('.nav-elem').removeClass('active');
    $(this).addClass('active');
  });
  
  $('.tut button').on('click', function(){
  	$('.tut').css({
  		pointerEvents: 'none',
      opacity: '0'
    });
  });

});