Добавить угловую ленту на сайт начальной загрузки

Question

Как получить эту ленту на моей начальной странице в качестве верхнего слоя? Твердый цвет и сплошной текст.

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

Как теперь лента на том же самом "уровне" в качестве фона. Это означает, что ссылки iframe iframe и т. Д. Будут отображаться на верхней части ленты.

Я использую этот шаблон:

https://blackrockdigital.github.io/startbootstrap-agency/

Если бы вы порекомендовали мне использовать другой код, пожалуйста, дайте мне знать.

Answer 1

Если я правильно понимаю, что вы ищете, это свойство z-index.

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

Answer 2

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>