Верстка блока html

210

26 марта 2017, 02:18

Как правильнее всего сверстать блок "выбрать пиццу" поверх других двух на картинке (или может и не 2 нужно - напишите лучший способ, пожалуйста)

Answer 1

Все просто: добавьте на фон картинку и прижмите ее по высоте наверх:

.container { 
  background: url('https://placeimg.com/1900/150/any') 50% 0 no-repeat #ccc; 
  padding: 50px 0; 
} 
 
.container>div { 
  min-height: 300px; 
  box-shadow: 0 0 10px #000; 
  background: #fff; 
  margin: 0 auto; 
  width: 50%; 
}

<div class=container> 
  <div></div> 
</div>

Answer 2

Например transform: translateY(-NNpx):

img { 
  max-width: 100%; 
  width: 100%; 
} 
 
body { 
  margin: 0; 
  background: #ccc; 
} 
 
 
.content { 
  max-width: 300px; 
  width: 100%; 
  height: 300px; 
  margin: 0 auto; 
  background: #fff; 
   
  -webkit-box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); 
          box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); 
   
  -webkit-transform: translateY(-100px); 
      -ms-transform: translateY(-100px); 
       -o-transform: translateY(-100px); 
          transform: translateY(-100px); 
}

<div class="wrap"> 
  <div class="top"> 
    <img src="http://www.wallpapersonview.com/wallpapers/2/fbcover_great_quality_facebook_timeline_cover_picture-588.jpg" alt=""> 
  </div> 
   
  <div class="content"> 
     
  </div> 
</div>

Или margin-top: -NNpx:

img { 
  max-width: 100%; 
  width: 100%; 
} 
 
body { 
  margin: 0; 
  background: #ccc; 
} 
 
 
.content { 
  max-width: 300px; 
  width: 100%; 
  height: 300px; 
  margin: 0 auto; 
  background: #fff; 
  position: relative; 
   
  -webkit-box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); 
          box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); 
   
  margin-top: -100px; 
}

<div class="wrap"> 
  <div class="top"> 
    <img src="http://www.wallpapersonview.com/wallpapers/2/fbcover_great_quality_facebook_timeline_cover_picture-588.jpg" alt=""> 
  </div> 
   
  <div class="content"> 
     
  </div> 
</div>

Или + комментарий .content {position: relative: top: -NNpx;}