css z-index 图片重叠定位

最新推荐文章于 2024-08-19 09:00:00 发布

最新推荐文章于 2024-08-19 09:00:00 发布 · 445 阅读

文章标签：

#CSS #ASP #F#

html 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在流程图中使用不同大小的图片叠加及红色边界框来高亮显示特定节点的方法。通过调整元素的位置属性和层级顺序，可以在复杂的流程图中突出重要的步骤。

流程图的时候在上面用红圈圈定位某节点用。

代码:

<img src="/i/eg_mouse.jpg" width=300px height:300px style="position:absolute;z-index:-2"/> 
<img src="/i/eg_mouse.jpg" width=150px height:150px style="position:absolute;z-index:-1"/> 
<img src="/i/eg_mouse.jpg" width=75px height:150px style="position:absolute;z-index:0"/> 
<div style="display:block;position:absolute;width:35px;height:35px;border:2px solid red;z-index=1;margin-top:10px;margin-left:10px"/>

效果如下: