CSS - Why does pattern overlap button? - css

Question

Here's my JS fiddle: https://jsfiddle.net/aeh8hxys/
Can somebody please tell me why (and how to stop!) the pattern overlaps my button? Thanks!
CSS:
.pattern
{
width:500px;
height:300px;
background-color: #FF0000;
}
.pattern:after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "\0020";
opacity: .5;
z-index: 0;
}
and HTML:
<div class="pattern">
<button class="btn btn-info">This is a button</button>
</div>

Answer 1

Because the pattern is "positioned" (a position value other than static), and has a z-index, which means it will appear over the button, which is non-positioned and has no z-index.
To make the button appear over the pattern, give it a position other than static and a z-index higher than pattern.
https://jsfiddle.net/aeh8hxys/1/
.pattern
{
width:500px;
height:300px;
background-color: #FF0000;
}
.pattern:after {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "\0020";
opacity: .5;
z-index: 0;
}
button {
position: relative;
z-index: 1;
}
<div class="pattern">
<button class="btn btn-info">This is a button</button>
</div>