html中一个div层在另外一个div或者img上显示

最新推荐文章于 2021-11-08 20:07:34 发布

低吟过往

最新推荐文章于 2021-11-08 20:07:34 发布

阅读量1.6k

点赞数

分类专栏：前端相关

本文链接：https://blog.youkuaiyun.com/tgm523151/article/details/84755088

版权

前端相关专栏收录该内容

7 篇文章

订阅专栏

本文探讨了如何在HTML中实现一个Div元素覆盖在另一个Div或图像上的布局技巧，通过CSS样式控制定位，实现层级叠加效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是样式:(1.这里千万要注意一点就是样式与样式之间不能有;号,不然;号后面的样式执行不到
            2.z-index越大越在前面
            3.要使用z-index定位的元素中必须有position为absolute
            4.还有一点就是.qie:hover .showWords{xxxx}这个showWord的class必须在
            .qie元素里面才能被拿到,这是一个筛选)

<style type="text/css">
	.showWords{
		display:none;
		border-radius: 5px;
		width:188px;
		font-size:14;
		color:yellow;
		z-index:2;
		text-align:left;
		margin-top: -230px;
		margin-left: 4px;
		padding-bottom: 12px;
    	        padding-right: 12px;
		padding-left:20px;
		padding-top:16px;
		background-color: blue;
		background-color: #c16;
            background-image: -webkit-gradient(linear, 0 0, 100% 100%,
                  color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                  color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                  color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                  to(transparent));
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                transparent 75%, transparent);
            background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                transparent 75%, transparent);
            background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                transparent 75%, transparent);
            background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                transparent 75%, transparent);
	}
	.qie:hover{
		cursor:pointer;
	}
	.qie:hover .showWords{
		display:block;
		border-radius: 5px;
		z-index:2;
	}
</style>

这里是html中代码:

<div class="qie" style="width: 200px;box-shadow: 0px 0px 5px #eee;">
	<img src="resources/template/${template.path}-index.jpg" style="width:100%;" />
        <!-- 这是要显示的内容:这个position:absolute是必须要的,他与z-index结合使用 -->
	<div class="showWords" style="position:absolute;border: solid 1px #ff7400;">
	  <c:forEach items="${template.showWords}" var="showWord">
	  <p style="margin:0px;">${showWord}</p>
	  </c:forEach>
	</div>
</div>