У меня есть два div, которые показывают «сегодняшнее специальное» блюдо, центрированное с использованием flexbox. Хочу добавить еще одну картинку под второе фирменное блюдо. Я думаю, что он должен быть расположен абсолютно, потому что я могу вытолкнуть его из верхней части раздела. Также я пытался использовать z-index, я хочу разместить заполнитель под вторым блюдом? Я использую sass, если это что-то меняет.
Вот код:
.specials {
background-image: url(../images/special-section-background.png);
min-height: 440px;
position: relative;
}
.specials .wrapper {
position: absolute;
text-align: center;
width: 100%;
height: 890px;
padding-top: 30px;
}
.specials .wrapper .heading {
font-family: "Playfair Display";
color: #fff;
font-size: 35px;
font-weight: 700;
}
.specials .wrapper .images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.specials .wrapper .images h2 {
font-family: "Playfair Display";
font-weight: 700;
font-size: 26px;
}
.specials .wrapper .images p {
font-family: "Sintony";
font-size: 14px;
}
.specials .wrapper .images .contact {
padding: 20px 0;
}
.specials .wrapper .images .contact h3,
.specials .wrapper .images .contact h4 {
display: inline;
padding: 0 20px;
}
.specials .wrapper .images .contact span {
font-family: "Sintony";
font-weight: 700;
font-size: 13px;
display: inline-block;
text-align: start;
}
.specials .wrapper .images .contact span:after {
content: '';
height: 100%;
width: 1px;
border-right: 1px solid #e1e1e1;
padding-right: 10px;
padding-top: 10px;
}
.specials .wrapper .images .contact span a {
color: #fe7cab;
}
.specials .wrapper .images .contact h3 {
font-family: "Playfair Display";
font-weight: 700;
font-size: 26px;
}
.specials .wrapper .images .contact h4 {
font-family: "Playfair Display";
font-weight: 700;
font-size: 30px;
color: #fea100;
}
.specials .wrapper .images .first-dish {
-ms-grid-column-align: end;
justify-self: end;
margin-right: 10px;
max-width: 570px;
-webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
}
.specials .wrapper .images .first-dish .description {
max-width: 430px;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: 1px solid #e1e1e1;
}
.specials .wrapper .images .second-dish {
max-width: 570px;
-webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
z-index: 1;
}
.specials .wrapper .images .second-dish .description {
max-width: 430px;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: 1px solid #e1e1e1;
z-index: 1;
}
.specials .last-offert {
position: absolute;
z-index: -1;
top: 78%;
right: 13%;
}
<div class = "specials">
<div class = "wrapper">
<div class = "heading">
<h2 class = "">Today Special</h2>
</div>
<div class = "images">
<div class = "first-dish">
<img src = "images/today-special-img.png" alt = "">
<div class = "description">
<h2>Food Name One</h2>
<p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
</div>
<div class = "contact">
<span>Home <br><a>Delivery</a></span>
<h3>1-088 005 006</h3>
<h4>89.00$</h4>
</div>
</div>
<div class = "second-dish">
<img src = "images/today-special-img.png" alt = "">
<div class = "description">
<h2>Food Name One</h2>
<p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
</div>
<div class = "contact">
<span>Home <br><a>Delivery</a></span>
<h3>1-088 005 006</h3>
<h4>99.00$</h4>
</div>
</div>
<div class = "last-offert">
<img src = "https://via.placeholder.com/150
C/O https://placeholder.com/" alt = "">
</div>
</div>
</div>
</div>
Я сделал два изменения:
position:relative
к .images
, чтобы придать контекст позиции .last-offert
background:white
к .second-dish
. Раньше он правильно располагался над изображением-заполнителем, но вы не могли сказать, потому что фон был прозрачным.Я не уверен, что полностью понял ваши потребности, поэтому дайте мне знать, если я что-то пропустил.
.specials {
background-image: url(../images/special-section-background.png);
min-height: 440px;
position: relative;
}
.specials .wrapper {
position: absolute;
text-align: center;
width: 100%;
height: 890px;
padding-top: 30px;
}
.specials .wrapper .heading {
font-family: "Playfair Display";
color: #fff;
font-size: 35px;
font-weight: 700;
}
.specials .wrapper .images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position:relative;
}
.specials .wrapper .images h2 {
font-family: "Playfair Display";
font-weight: 700;
font-size: 26px;
}
.specials .wrapper .images p {
font-family: "Sintony";
font-size: 14px;
}
.specials .wrapper .images .contact {
padding: 20px 0;
}
.specials .wrapper .images .contact h3,
.specials .wrapper .images .contact h4 {
display: inline;
padding: 0 20px;
}
.specials .wrapper .images .contact span {
font-family: "Sintony";
font-weight: 700;
font-size: 13px;
display: inline-block;
text-align: start;
}
.specials .wrapper .images .contact span:after {
content: '';
height: 100%;
width: 1px;
border-right: 1px solid #e1e1e1;
padding-right: 10px;
padding-top: 10px;
}
.specials .wrapper .images .contact span a {
color: #fe7cab;
}
.specials .wrapper .images .contact h3 {
font-family: "Playfair Display";
font-weight: 700;
font-size: 26px;
}
.specials .wrapper .images .contact h4 {
font-family: "Playfair Display";
font-weight: 700;
font-size: 30px;
color: #fea100;
}
.specials .wrapper .images .first-dish {
-ms-grid-column-align: end;
justify-self: end;
margin-right: 10px;
max-width: 570px;
-webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
}
.specials .wrapper .images .first-dish .description {
max-width: 430px;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: 1px solid #e1e1e1;
}
.specials .wrapper .images .second-dish {
max-width: 570px;
-webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
z-index: 1;
background:white;
}
.specials .wrapper .images .second-dish .description {
max-width: 430px;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: 1px solid #e1e1e1;
z-index: 1;
}
.specials .last-offert {
position: absolute;
z-index: -1;
top: 78%;
right: 13%;
}
<div class = "specials">
<div class = "wrapper">
<div class = "heading">
<h2 class = "">Today Special</h2>
</div>
<div class = "images">
<div class = "first-dish">
<img src = "images/today-special-img.png" alt = "">
<div class = "description">
<h2>Food Name One</h2>
<p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
</div>
<div class = "contact">
<span>Home <br><a>Delivery</a></span>
<h3>1-088 005 006</h3>
<h4>89.00$</h4>
</div>
</div>
<div class = "second-dish">
<img src = "images/today-special-img.png" alt = "">
<div class = "description">
<h2>Food Name One</h2>
<p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
</div>
<div class = "contact">
<span>Home <br><a>Delivery</a></span>
<h3>1-088 005 006</h3>
<h4>99.00$</h4>
</div>
</div>
<div class = "last-offert">
<img src = "https://via.placeholder.com/150
C/O https://placeholder.com/" alt = "">
</div>
</div>
</div>
</div>
Да, так это выглядит для меня.
Хорошо, вот как мой фрагмент выше выглядит для меня: ibb.co/ZKfr0Nt Если ваш выглядит иначе, можете ли вы сообщить мне, какой браузер вы используете?
Заполнитель img должен быть частично под вторым предложением, в правом нижнем углу, где вы можете увидеть цену 99 $.