Question

我有一个容器，主要容纳了页面上所有内容的宽度（因此不是100％）是固定的，底部的页脚为width:100%。

我想使容器的那部分位于页脚上方，这就是我所附带的：
https://jsfiddle.net/84weu9nz/

这样做，正如您所注意到的，由于z-index，页脚内容不再可单击或不可选择。我可以将容器设置为相对位置，例如https://jsfiddle.net/rLmuq2of/，但是该解决方案的问题是我无法在position:relative元素，某些弹出窗口或某些内部放置页面的全部内容该元素中的功能可能会有意外的行为，因此我认为这不是一个好习惯。

有解决方案吗？谢谢。

Answer 1

我能想到的一种解决方案是，将css-rule用于指针事件，只要您在主元素中没有任何可点击的内容即可：

main {
  pointer-events: none;
}

如果您的主要元素内部有可点击元素，则必须扩展规则：

main {
  pointer-events: none;
}
main * {
  pointer-events: all;
}

示例

main {
  position: relative;
  background-color: red;
  width: 400px;
  margin: 0 auto;
  pointer-events: none;
}

main * {
  pointer-events: all;
}

footer {
  background-color: green;
  padding-top: 20px;
  margin-top: -20px;
}

<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <a href="#">clickable element</a> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</main>
<footer>
  <li><a href="#">#1</a></li>
  <li><a href="#">#2</a></li>
  <li><a href="#">#3</a></li>
</footer>

Answer 2

我设法使用flex的功能来做到这一点，但是我不确定这是否真的是更好的解决方案。

我使用css flex-direction: column-reverse颠倒了列/元素的顺序，然后将使用顺序的main div再次置于order: 1的第一位置（默认顺序为0）。

.app {
  display: flex;
  flex-direction: column-reverse;
}

main {
  background-color: red;
  width: 400px;
  margin: 0 auto;
  order: 1;
}

footer {
  background-color: green;
  padding-top: 20px;
  margin-top: -20px;
}

<div class="app">
  <main>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </main>
  <footer>
    <li><a href="#">#1</a></li>
    <li><a href="#">#2</a></li>
    <li><a href="#">#3</a></li>
  </footer>
</div>

使容器略高于页脚

2 个答案: