生成如图所示的样式纪录,有关z-index

示例图

主要使用的是伪类元素,思路如下:

  1. 父元素为块级元素,且定位为relative,目的是方便伪类元素相对齐定位。
  2. 伪类元素绝对定位,leftright设置为0让其与父元素等宽,top设置为50%是为了让其垂直居中。
  3. 将块级元素里面的真正内容部分也相对定位,并且z-index的值要大于伪类元素的。代码如下:
<p class="target">
        <span>通知</span>
    </p>
           p{
            text-align: center;
            position: relative;
            width: 300px;
        }
        p span{
            padding: 0px 5px;
            z-index:1;/*核心部分*/
            position: relative;/*核心部分*/
            background-color: #fff;
        }
        .target::after{
            z-index: 0;
            background-color: lightcoral;
            content: "";
            height: 1px;/*核心部分*/
            position: absolute;/*核心部分*/
            left: 0;/*核心部分*/
            right: 0;/*核心部分*/
            top: 50%;/*核心部分*/
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 第一节:z-index基础 较大的z-index会覆盖较小的那个z-index元素 z-index:auto 默认...
    胖鱼尾巴阅读 4,668评论 0 0
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 11,080评论 0 15
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,990评论 0 1
  • 2017/08/27 中国晋江 遇见最好的自己
    柯维锋阅读 1,495评论 0 0