时间戳

首页 > 解决方案 > 为什么 div 标签内的对象被页脚标签覆盖？

html - 为什么 div 标签内的对象被页脚标签覆盖？

问题描述

我的div标签覆盖footer标签的图像。以下是我尝试过但没有奏效的几种方法：

#productteam>section>:nth-child(2)>section>.col3{width:100%;position:relative;}
#productteam>section>:nth-child(2)>section>.col3>:first-child{position:absolute;overflow:hidden;}
#productteam>section>:nth-child(2)>section>.col3>:first-child::before{content:"";width:100%;height:100%;
top:0;left:0;z-index:1;position:absolute;opacity:0;transition:all 0.5s 0.2s;
	background-image:linear-gradient(to top, rgba(50,50,50,0.7) 20%, rgba(50,50,50,0.6) 30%,
		rgba(50,50,50,0) 100%);}
#productteam>section>:nth-child(2)>section>.col3:hover>:first-child::before{opacity: 0.8;}
#productteam>section>:nth-child(2)>section>.col3>a{border-radius: 1rem;}
#productteam>section>:nth-child(2)>section>.col3>a>img{transition:all 0.2s;transform:scale(1);}
#productteam>section>:nth-child(2)>section>.col3:hover>a>img{transform:scale(1.2);}
#productteam>section>:nth-child(2)>section>.col3 p{top:14rem;left: 2rem; z-index: 2;position: absolute;
visibility: hidden;opacity: 0;transition: all 0.5s 0.2s;font-size: 1.25rem;font-style: italic;
font-weight: bold; color: white;line-height: 2rem;}
#productteam>section>:nth-child(2)>section>.col3:hover p{visibility: visible;opacity: 1;top:9rem;}
<div id="productteam">
		<section class="container paddingV2">
			<div class="flexbox dividingLine flexDirectionC alignItemsCenter marginAll1">
				<h1>Prodution Team</h1>
				<h2>製作團隊</h2>				
			</div>
			<div class="marginAll1">
				<section class="flexbox justifyContentBetween">
					<div class="col3 marginAll1">
						<a href="#"><img src="images/productteam1.jpg" alt="藤林秀麿"></a>
						<p>總監<br>
						藤林秀麿&lt;/p>
					</div>
					<div class="col3 flexbox flexDirectionC marginAll1">
						<a href="#"><img src="images/productteam2.jpg" alt="青沼英二"></a>
						<p>製作人&lt;br>
						青沼英二</p>
					</div>
					<div class="col3 flexbox flexDirectionC marginAll1">
						<a href="#"><img src="images/productteam3.jpg" alt="戶田昭吾"></a>
						<p>編劇<br>
						戶田昭吾</p>
					</div>
					<div class="col3 flexbox flexDirectionC marginAll1">
						<a href="#"><img src="images/productteam4.jpg" alt="堂田卓宏"></a>
						<p>程式<br>
						堂田卓宏</p>
					</div>
					<div class="col3 flexbox flexDirectionC marginAll1">
						<a href="#"><img src="images/productteam5.jpg" alt="瀧澤智"></a>
						<p>美術<br>
						瀧澤智&lt;/p>
					</div>
					<div class="col3 flexbox flexDirectionC marginAll1">
						<a href="#"><img src="images/productteam6.jpg" alt="若井淑"></a>
						<p>音樂<br>
						若井淑&lt;/p>
					</div>
				</section>	
			</div>
		</section>
	</div>
	<!-- 店鋪搜尋 著作商標 -->
	<footer class="bgDarkgray">
		<nav class="container">
			<div>
				<a href="#">footer</a>
			<div>
			</div>
		</nav>
	</footer>

标签： htmlcss

解决方案

查看所需的设计会很有帮助，但只是为了修复元素重叠，您可以position: absolute从标签中删除并使用文本为 p 标签添加颜色，并附上带有最终结果的 codepen：https ://codepen.io/Liveindream/pen /zYxReOY

推荐阅读