Укладка коробки над изображением в CSS

Question

Я пытаюсь уложить черный ящик с непрозрачностью над средней и правой панелями, чтобы они были «серыми».

я могу получить, насколько это:

Который явно не совсем верно, поскольку цвет за панелями, но мне нужно, чтобы быть впереди

Мой код:

.packages_wrapper 
    .packages.premium 
    .dmnd 
     = image_tag "premium.png" 
     %h1 
     PREMIUM 
     %span.left_shape 
     %span.right_shape 
    %ul.package_list{style: 'margin-top: 45px;'} 
     %li Create business listing 
     %li Upload your logo 
     %li Add multiple contact details 
     %li Appear in searches for your region and category 
     %li Write business description 
    %p.price Free 
    .package_after_login.premium 
     = link_to 'Sign up now', new_owner_path(query: 'Premium') 
    .square-box 

    .packages.silver 
     .dmnd 
     = image_tag "silver.png" 
     %h1 
      SILVER 
      %span.left_shape 
      %span.right_shape 
     %p 
     %span.small_premium_inline_icon 
     %p.plusline{style: 'font-weight: bold; font-size: 18px;'} + 
     %ul.package_list{style:'color: #59595c;'} 
     %li Respond to reviews 
     %li Add social media links 
     %li Upload images and video 
     %li Create detailed listing 
     %p.price £99 per year 
     .package_after_login#silver 
     = link_to 'Sign up now', new_owner_path(query: 'Silver') 
    .packages.gold 
     .dmnd 
     = image_tag "golden.png" 
     %h1 
      GOLD 
      %span.left_shape 
      %span.right_shape 
     %p 
     %span.small_premium_inline_icon 
     %p.plusline.gold_column_plus{style: 'font-weight: bold; font-size: 18px;'} + 

     %p 
     %span.small_premium_inline_icon.silver_wrapper 
     %p.plusline.gold_column_plus{style: 'font-weight: bold; font-size: 18px;'} + 

     %ul.package_list 
     %li No competitor banner ads on your business page 
     %p.price £149 per year 
     .package_after_login#gold 
     = link_to 'Sign up now', new_owner_path(query: 'Golden') 

И мои css включают es:

.square-box{ 
    position: relative; 
    width: 60%; 
    overflow: hidden; 
    background: #4679BD; 
    height: 530px; 
    padding-top: 30px; 
    padding-bottom: 30px; 
    margin-bottom: 20px; 
    margin-right:50px; 
    float:right; 
} 
    .square-box:before{ 
    content: ""; 
    padding-top: 100%; 
} 

Кто-нибудь знает, как я могу получить его спереди?

Благодаря

Answer 1

Вам нужно будет изменить Z-индекс и альфа (непрозрачность) от .square коробки

После OP размещен примером Url я updted моего ответа со следующей HTML и CSS,

HTML

<div class="packages_wrapper"> 
<div class="packages premium"> 
<div class="dmnd"> 
<img alt="Premium" src="/assets/premium-cdfcd2e49eb7f0cccdfcce365f190a11.png"> 
<h1> 
PREMIUM 
<span class="left_shape"></span> 
<span class="right_shape"></span> 
</h1> 
</div> 
<ul class="package_list" style="margin-top: 45px;"> 
<li>Create business listing</li> 
<li>Upload your logo</li> 
<li>Add multiple contact details</li> 
<li>Appear in searches for your region and category</li> 
<li>Write business description</li> 
</ul> 
<p class="price">Free</p> 
<div class="package_after_login premium"> 
<a href="/owners/new?query=Premium">Sign up now</a> 
</div> 
</div> 
<div class="packages silver"> 
<div class="dmnd"> 
<img alt="Silver" src="/assets/silver-74195f85f4e27927f7f1e91625c5dac9.png"> 
<h1> 
SILVER 
<span class="left_shape"></span> 
<span class="right_shape"></span> 
</h1> 
</div> 
<p> 
<span class="small_premium_inline_icon"></span> 
</p> 
<p class="plusline" style="font-weight: bold; font-size: 18px;">+</p> 
<ul class="package_list" style="color: #59595c;"> 
<li>Respond to reviews</li> 
<li>Add social media links</li> 
<li>Upload images and video</li> 
<li>Create detailed listing</li> 
</ul> 
<p class="price">£99 per year</p> 
<div class="package_after_login" id="silver"> 
<a href="/owners/new?query=Silver">Sign up now</a> 
</div> 
</div> 
<div class="packages gold"> 
<div class="dmnd"> 
<img alt="Golden" src="/assets/golden-646ae0d7f8be160135445ff17c6117be.png"> 
<h1> 
GOLD 
<span class="left_shape"></span> 
<span class="right_shape"></span> 
</h1> 
</div> 
<p> 
<span class="small_premium_inline_icon"></span> 
</p> 
<p class="plusline gold_column_plus" style="font-weight: bold; font-size: 18px;">+</p> 
<p> 
<span class="small_premium_inline_icon silver_wrapper"></span> 
</p> 
<p class="plusline gold_column_plus" style="font-weight: bold; font-size: 18px;">+</p> 
<ul class="package_list"> 
<li>No competitor banner ads on your business page</li> 
</ul> 
<p class="price">£149 per year</p> 
<div class="package_after_login" id="gold"> 
<a href="/owners/new?query=Golden">Sign up now</a> 
</div> 
</div> 
<div class="square-box"></div> 
</div> 

CSS

.packages_wrapper { 
    clear: both; 
    height: 430px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 30px; 
    width: 100%; 
    position: relative; 
} 
.square-box{ 
    position: absolute; 
    width: 620px; 
    height: 100%; 
    background: rgba(0,0,0,0.3); 
    right: 30px; 
    bottom: -92px; 
} 

Answer 2

он нуждается в более высоком (CSS) Z-индекс, чем другие предметы

z-index:999 

и, возможно, некоторые непрозрачности:

opacity:.3; 

В вашем примере вы можете добавить следующее css для аналогичного эффекта без добавления большего количества элементов (он вычеркивает вариант золота и серебра):

.packages.silver, .packages.gold { 
    opacity: 0.5; 
}