css下划线与div重叠

CSS样式可以实现下划线和重叠效果，下面我们来了解一下。

CSS下划线

 p {
    text-decoration: underline;
  } 

通过给p标签设置text-decoration属性，值为underline，即可在文字下面添加下划线。

CSS重叠

 .box {
    position: relative;
  }
  .inner {
    position: absolute;
    top: 0;
    left: 0;
  } 

通过设定div的position属性，可以实现重叠效果。将box设为relative，inner设为absolute，并给inner设定top和left属性，使其在box内部定位到最上方。

CSS下划线与div重叠

 .box {
    position: relative;
    border-bottom: 1px solid black;
  }
  p {
    position: relative;
    z-index: 1;
  }
  .inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  } 

将上述两个效果结合起来，可以实现下划线与div重叠。给box设置border-bottom属性，为其添加下划线；给p设置position：relative，z-index：1让其在box中处于下层；将inner设为位置absolute，z-index：2，使其在box中处于上层，从而实现重叠效果。