Question

我通过此CSS为网站提供了固定的标头：

@media only screen and (min-width: 320px) and (max-width: 520px) {
  .site-header {
    position: fixed!important;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

我添加了z-index，否则页面中的按钮与标题重叠，而不是位于标题下方，但是现在这些按钮在移动视图中不起作用。这是按钮的CSS：

@media only screen and (min-width: 320px) and (max-width: 520px) {
  .icon-box .icon-box-readmore {
    font-weight: 500;
    text-transform: uppercase;
    color: #FFF;
    border-bottom: 0px;
    text-decoration: none;
    border-color: #FFA500;
    border-width: 2px;
    border-style: solid;
    font-size: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 50px;
    padding-right: 50px;
    letter-spacing: 4px;
    position: fixed;
    background-color: #FFA500;
    box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.8);
     z-index: 1;
  }
}

请帮助使按钮在移动视图中可单击，同时使网站标题保持粘性。

Answer 1

您的问题出在.site-header类中，尤其是height: 100%;。由于您将标头设置为具有position: fixed，因此将高度设置为100％意味着标头的高度与浏览器的高度相同（实际上在您所有内容（包括按钮）上都有一个元素）。

根据您的设置，您有几个选项可以解决此问题：

1）将height: 100%更改为固定值，例如height: 75px。这样可以解决此问题，但是可能需要更多CSS才能正确设置标题样式。

2）如果标题中没有可点击的项目，则可以添加pointer-events: none;。这将使元素对点击“不可见”，因此您的内容可以使用，但标题中的任何内容都不可单击（可能不理想）。

固定移动标题时按钮不起作用

1 个答案: