各种页面样式书写（滚动条等）绝对定位层级点击方法

原创已于 2024-06-17 13:44:12 修改 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #css3

于 2023-06-07 10:34:28 首次发布

本文介绍了如何使用CSS自定义滚动条的样式，包括宽度和颜色。此外，还探讨了处理p标签换行、行内元素的line-height设定以及绝对定位元素的定位方法。针对绝对定位元素遮挡下方元素导致的点击问题，提出了通过调整pointer-events属性来实现事件穿透和防止遮挡的解决方案。

1、滚动条设置

&::-webkit-scrollbar {
      width: 5px;  // 显示宽度
      // height: 16px;
      //display: none;  不显示
    }
&::-webkit-scrollbar-thumb:vertical {
      height: 5px;
      background-color: rgb(70, 68, 68);
      background-color: #AAAAAA;
    }

p标签进行换行问题

  p{
	word-break: break-all;
    white-space:normal;
    word-wrap: break-word;
  }

.行内元素

 line-height的值等于height的值

absolute 定位元素

1.  top:50% + margin-top : 负盒子的高度一半    left:50% + margin-left : 负盒子的宽度一半


2.transform:translate(-50%,-50%)


3.top , left , bottom ,right , = 0  +   margin:auto;

绝对定位元素挡住下方元素点击解决办法

在这里插入代码片 pointer-events:none; 表示它将捕获不到任何点击，而只是让事件穿透到它的下面。

 pointer-events:auto; 表示鼠标不会穿透当前层, 鼠标事件仍会监听这个父元素下面的子元素。

外层div如果已经绝对或相对定位了（并且本层有点击事件或其他执行事件继续有效，这两步执行后，外层的父元素上的事件会正常执行，同时下层元素也可点击）：

position: absolute;
z-index:9999
pointer-events: none;

内层div设置绝对定位：

position: absolute;
z-index:10000
pointer-events: auto;

菱形样式：
在这里插入图片描述

// 样式：
.fixedBidArrow {
      width: 20rpx;
      height: 20rpx;
      transform: rotateZ(45deg);
      position: absolute;
      top: -10rpx;
      left: 35rpx;
      background-color: #F7F8FA;
      border: 1px solid #F7F8FA
    }