CSS - Почему кнопка перекрытия шаблонов?

Question

Вот моя скрипка JS: https://jsfiddle.net/aeh8hxys/

Может кто-нибудь, пожалуйста, скажите мне, почему (и как остановить!) Узор перекрывает мою кнопку? Благодаря!

УС:

.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; 
} 

и HTML:

<div class="pattern"> 
    <button class="btn btn-info">This is a button</button> 
</div> 

Answer 1

Поскольку картина "позиционируется" (а position значение, отличное от static), и имеет z-index, что означает, что будет появляться над кнопка, которая не расположена и не имеет z-index.

Чтобы кнопка появилась над рисунком, дайте ей position кроме static и z-index выше, чем у шаблона.

https://jsfiddle.net/aeh8hxys/1/

.pattern 
 
{ 
 
    width:500px; 
 
    height:300px; 
 
    background-color: #FF0000; 
 
} 
 

 
.pattern:after { 
 
\t background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkRGNDcyQ0Y4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkRGNDcyRDA4ODQ4MTFFNEFFRjVERDUwMjZBRDgzNUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyREY0NzJDRDg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyREY0NzJDRTg4NDgxMUU0QUVGNURENTAyNkFEODM1RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWxVHsAAABESURBVHjahI9BDgAgCMO0///zjBcDZk6OpIF2Shpm9nLWBQFSAuulBpPeVZgANZgPdGCcuAvEibtAnLgL5FV5uy8BBgBvsBUQrZ/GBQAAAABJRU5ErkJggg==") repeat; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t content: "\0020"; 
 
\t opacity: .5; 
 
\t z-index: 0; 
 
} 
 
button { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<div class="pattern"> 
 
<button class="btn btn-info">This is a button</button> 
 
</div>