【HTML+CSS】使用CSS中的Position与z-index轻松实现一个简单的自定义标题栏效果

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

效果如下

代码如下

<style type="text/css">.title {/*border: 1px solid red;*/width: 640px;margin: 100px auto;position: relative;}.title > .bar {width: 640px;background: #efefef;overflow: hidden;}.title > .bar > .color-block-1, .title > .bar > .color-block-2 {width: 111px;height: 12px;background: #00b38c;float: left;background-image: linear-gradient(to right, #5fbca9 , #00b38b);}.title > .bar > .color-block-2 {width: 12px;margin-left: 12px;}.title > h3 {font-size: 32px;font-weight: normal;color: #00b38b;position: absolute;left: 30px;top: -32px;margin: 0px;padding: 0px;z-index: -1;}.title>p{margin: 0px;font-size: 20px;padding-top: 10px;color: #00b29b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style><!--自定义标题栏-->
<div class="title"><div class="bar"><div class="color-block-1"></div><div class="color-block-2"></div></div><h3>1</h3><p>把你的title文字写在这里...</p>
</div><!--自定义标题栏-->
<div class="title"><div class="bar"><div class="color-block-1"></div><div class="color-block-2"></div></div><h3>2</h3><p>把你的title文字写在这里...</p>
</div><!--自定义标题栏-->
<div class="title"><div class="bar"><div class="color-block-1"></div><div class="color-block-2"></div></div><h3>3</h3><p>把你的title文字写在这里...</p>
</div>