如何使用Materialize CSS调整tap-target按钮的位置？

你遇到的这个问题很典型——Materialize的tap-target触发按钮默认使用了fixed定位，并且硬编码了right: 20px和bottom: 20px这类属性，所以普通的margin、padding或者外层div的定位根本影响不了它，因为fixed定位的元素是脱离文档流、相对于浏览器视口定位的。

下面给你两种可靠的解决方法：

方法1：全局修改所有tap-target按钮 #

如果想统一调整页面上所有tap-target触发按钮的位置，直接覆盖Materialize的默认CSS即可：

.tap-target-trigger {
  /* 保持fixed定位（相对于视口），自定义位置 */
  position: fixed;
  right: 40px;   /* 替换默认的20px */
  bottom: 40px;  /* 替换默认的20px */
  /* 也可以改成top/left把按钮移到其他角落，比如左上角：
  top: 20px;
  left: 20px;
  */
}

方法2：单独修改特定的tap-target按钮 #

如果只想调整某一个tap-target的位置，给它加个自定义类，避免影响其他按钮：

HTML部分 #

<!-- 给触发按钮添加自定义类my-custom-tap -->
<a class="btn tap-target-trigger my-custom-tap" data-target="my-tap-target">
  <i class="material-icons">menu</i>
</a>

<!-- 对应的tap-target内容 -->
<div class="tap-target" data-target="my-tap-target">
  <div class="tap-target-content">
    <h5>Title</h5>
    <p>A bunch of text</p>
  </div>
</div>

CSS部分 #

.my-custom-tap {
  position: fixed;
  left: 30px;   /* 移到左下角 */
  bottom: 30px;
  /* 如果需要相对于某个父元素定位，把fixed改成absolute，同时给父元素加position: relative */
}

关键要点提醒 #

• 为什么之前的操作无效？因为fixed定位的元素不受父元素布局影响，也不会被margin/padding的常规布局规则改变位置，必须直接修改它的top/right/bottom/left属性。
• 如果要让按钮相对于某个容器定位，把position: fixed改成position: absolute，同时确保它的直接父元素设置了position: relative，这样按钮就会相对于父容器的边界定位了。

内容的提问来源于stack exchange，提问作者JaySnel