html - 如何在div下隐藏一个绝对位置的div
问题描述
我有两个 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>
推荐阅读
- mysql - mySQL 从主键中选择和从外键中选择 big O
- ios - 无法存档反应原生 IOS 应用程序
- java - Mockito - 是否有“不在列表中的值”的匹配器?
- python - 使用本地模块 Python 无需安装
- python - 在线程崩溃时自动生成到 STDERR 的完整堆栈跟踪
- reactjs - 在 react-router 中传递搜索并访问它
- twitter-bootstrap - CSS在标题后显示边框
- javascript - 占位符的AngularJS过滤器刷新
- java - 休眠值分为 2 列。如何映射?
- android - 当 Snackbar 出现时,BottomNavigationView 移动