Cacher is the code snippet organizer for pro developers

/*
The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
*/

img {
    position: absolute;
    z-index: 1;
}

/* 例 */
z-index: 9999;		/* 手前 */
z-index: 500;		/* 中間 */
z-index: 1;		/* 後ろ */

/* 消す場合 */
position: absolute;
top: -9999px;
left: -9999px;

	/* または */
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;

/* 元に戻す（見せる）場合 */
position: relative;
top: initial;
left: initial;

/*
Doesn't work on IE9 and below
http://caniuse.com/#feat=multicolumn

http://www.w3schools.com/css/css3_multiple_columns.asp
*/

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;

/*
ブラウザー下にフッターを釘付け
Keeping footer always at the bottom of the page, BUT not fixed.
https://codepen.io/cbracco/pen/zekgx
*/

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  min-height: 100%;
  margin-top: 0;
  padding-bottom: 192px;
}

.footer-box {
	position: absolute;
  width: 100%;
  bottom: 0;
}

/*
天地センター揃え
To center block element vertically
https://css-tricks.com/centering-css-complete-guide/
*/

.center_block {
	position: absolute;
	top: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

/* または */

.center_block {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  width: 100%;
}

/* 
バックグラウンドの斜め切り 
Diagonal background - for most browsers 
*/

background-image: -webkit-linear-gradient(110deg, rgba(255,0,0,0) 45%, $cream 45%);
/* for IE10 and above */
background-image: linear-gradient(110deg, rgba(255,0,0,0) 45%, $cream 45%);


/*  Can also refer about IE
https://stackoverflow.com/questions/9455622/getting-linear-gradients-to-work-on-ie-8
*/