Add corner ribbon to bootstrap site - html

Question

How do I get this ribbon to be on of my bootstrap page as the top layer? Solid color and solid text.
html:
<div class="corner-ribbon bottom-left sticky orange">Hello</div>
CSS:
/* The ribbons */
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* Custom styles */
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-left{
top: auto;
bottom: 25px;
left: -50px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}
As it is now the ribbon in on the same "level" as the background. Meaning that youtube iframe links etc. will go on the top of the ribbon.
I use this template:
https://blackrockdigital.github.io/startbootstrap-agency/
If you would recommend me to use another code, please let me know.

Answer 1

Just use z-index:
/* The ribbons */
.corner-ribbon{
width: 200px;
background: #e43;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
/* Pay attention! */
z-index: 1;
position: fixed;
}
/* Custom styles */
.
corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-left{
top: auto;
bottom: 25px;
left: -50px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/* Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}
.annoying_block{
position: absolute;
bottom: 10px;
left: 10px;
width: 50vw;
height: 100px;
background-color: red;
}
<div class="corner-ribbon bottom-left sticky orange">Hello</div>
<div class="annoying_block">
</div>

Answer 2

If I understand correctly, what you're looking for is the z-index property.
.corner-ribbon{
z-index: 100;
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}