0

введите сюда описание изображения

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

1
  • 1
    .block {position: relative: top: -150px;}.
    – YozhEzhi
    24 мар 2017 в 12:18

2 ответа 2

1

Например 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;}

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.