Question

我通过将内容类margin-top设置为10 rem来分隔导航栏和内容部分，因为单击“打开”图标时此设置，覆盖层不会覆盖顶部10rem区域。有人可以帮我吗？下面是我的代码

# permanent apple keyboard keyswap
echo "options hid_apple swap_opt_cmd=1" | sudo tee -a /etc/modprobe.d/hid_apple.conf
update-initramfs -u -k all

# Temporary & instant apple keyboard keyswap
echo '1' | sudo tee -a /sys/module/hid_apple/parameters/swap_opt_cmd

# Windows and Mac keyboards - GUI (Physical Alt is Ctrl, Physical Super is Alt, Physical Ctrl is Super)
setxkbmap -option;setxkbmap -option altwin:ctrl_alt_win

# Windows and Mac keyboards - Terminal Apps (Physical Alt is Super, Physical Super is Alt, Physical Ctrl is Ctrl)
setxkbmap -option;setxkbmap -option altwin:swap_alt_win

#
# If you want a systemd service and bash script to help toggle between
# GUI and Terminal applications then look at project Kinto.
# https://github.com/rbreaves/kinto
#
# Note: The above may not work for Chromebooks running Linux, please look
# at project Kinto for that.
#
# If anyone would like to contribute to the project then please do!
#

$(document).ready(function() {

  $("#openNav").click(function() {
    $("#mySidenav").css({
      'width': '20%'
    });
    $(".overlay").css({
      'position': 'fixed',
      'display': 'block',
      'background-color': 'rgba(0, 0, 0, 0.5)',
      'z-index': ' 2',
      'height': '100%',
      'width': '100%'
    });
  });


  $(".closebtn").click(function() {
    $("#mySidenav").css({
      'width': '0'
    });
    $(".overlay").css({
      'display': 'none',
      'background-color': 'rgba(0, 0, 0, 0)'
    });
  });

});

body {
  font-family: "Lato", sans-serif;
  /* background-color: rgba(0, 0, 0, 0.5); */
}

.overlay {
  display: none;
  height: 100%;
  width: 100%;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  border-style: solid;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.navbarTest4 {
  width: 100%;
  text-align: right;
  background-color: white;
  height: 100px;
  border-style: solid;
  position: fixed;
  top: 0;
}

.content {
  margin-top: 10rem;
  border-style: solid;
  width: 100%;
}

我尝试将overlay类放在body标签中，但是没有用。我试过将overlay div包裹在整个文档中，也没有用。

Answer 1

您可以将reader.onloaded = (function() { preview.src = reader.result this.setState(...) }).bind(this)添加到叠加层类中。这将使叠加层div从窗口的最高点开始。

叠加层不覆盖导航栏

1 个答案: