fixed floating block example

by Jason Davis

HTML

<div class="floating-block">
  <p>
  You can float your text or logo on top in this block.
  <br />You can float your text or logo on top in this block.
  <br />You can float your text or logo on top in this block.
  <br />You can float your text or logo on top in this block.
  <br />You can float your text or logo on top in this block.
  </p>
</div>
<img class="fullwidthblock" src="https://s-media-cache-ak0.pinimg.com/236x/88/be/79/88be79475d242373f8cecb76006f9f5b.jpg" />
<div class="fullwidthblock stayOnTop blue-background">
  Text blocks also
</div>
<img class="fullwidthblock stayOnTop" src="https://s-media-cache-ak0.pinimg.com/236x/88/be/79/88be79475d242373f8cecb76006f9f5b.jpg" />

CSS

.fullwidthblock	{ 
  width:100%;
  position:relative;
  z-index:1;
}
.blue-background{
  background-color:blue;
  height:400px;
}
.floating-block{
  position: fixed;
  z-index:2;
  top: 25%;
  right: 25%;
  width: 50%;
  border: 3px solid red;
  background-color:white;
}
.stayOnTop{
  position:relative;
  z-index:3;
}