css - 使用位置 :absolute 将 ionic 标题居中

Question

我是 Ionic Framework 的初学者。最近我在导航栏的左侧建立了一个带有滑动后退按钮的页面。这会将标题向右移动一点:(我在标题中添加了红色背景来说明这一点)

不使用position:absolute:

为了使标题居中，我添加了以下 CSS 代码:

ion-title {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: red;
}

有效:

使用position:absolute:

问题是标题现在“覆盖”了向后滑动的按钮，导致无法点击该按钮。

有什么解决办法吗？提前谢谢你。

Answer 1

尝试向后退按钮添加 position:relative 和一些 z-index 值...

我已经创建了一个工作片段来说明您的问题

div {
  position: relative;
}

ion-title {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: red;
  box-sizing: border-box;
}

button {
  width: 20px;
  height: 20px;
  background: green;
  position: relative;
  z-index: 99;
}

<div>
  <button></button>
  <ion-title>About</ion-title>
</div>