Question

试图做一个简单的布局，却走到了尽头。我正在尝试制作一个完全适合屏幕的页面，这样就不会滚动了。基本上，在所包含的代码中，我希望在淡黄色容器的顶部显示带红色标题的栏（在顶部）。淡黄色容器的高度设置为100vh，以跨越viewport的高度。这样，页面将具有完美的大小，因此您无需滚动。

我认为这与z-index ...有关，直到现在我仍然认为我理解。我看过视频，看过文章，尝试了所有我能想到的东西。我的最后一招是在网上试试运气。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}

header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}

<div class="bg">
  <header>
    <h1>Titlebar</h1>
  </header>
  <div class="flex-container main-container">
    <div class="content-box">
      <div class="flex-container code-container">
        <div class="key-code">
          <span>65</span>
        </div>
      </div>
      <div class="flex-container key-container">
        <div class="flex-container key">
          <div>a</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您希望导航栏始终停留在顶部，请执行此操作。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}
header {
    z-index: 11;
    position: fixed;
width:100%
}
header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}

<div class="bg">
  <header>
    <h1>Titlebar</h1>
  </header>
  <div class="flex-container main-container">
    <div class="content-box">
      <div class="flex-container code-container">
        <div class="key-code">
          <span>65</span>
        </div>
      </div>
      <div class="flex-container key-container">
        <div class="flex-container key">
          <div>a</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您需要为标题设置z-index。例如：

header{
  position: relative;
  z-index: 9999
}

如果需要，标题应停留在屏幕顶部。添加定位。例如：

header{
  position: fixed;
  top: 0; 
  width: 100%;
  z-index: 9999
}

Answer 3

欢迎您！

将位置<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container"> <div class="mt-0 mb-3 alert alert-success fixedAlert"> <span class="text-here"> FIXED ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span> <button type="button" class="close"> <span>×</span> </button> </div> <div class="mt-0 mb-3 alert alert-primary "> <span class="text-here"> ORIGINAL ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span> <button type="button" class="close"> <span>×</span> </button> </div> </div>与relative一起使用解决了z-index上的问题

当您设置位置：相对于元素时，您将建立一个新的包含块。该块内的所有定位都相对于它。

在该块内的元素上设置z-index只会更改其相对于同一块内其他元素的层。

header

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}
header {
    z-index: 11;
    position: relative;
}
header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}

CSS Z-index：如何使标题栏显示在顶部？

3 个答案: