Question

我有以下...

...而且我想让它看起来像这样：

即强制将标题和副标题的框阴影和边框向后移动，然后将title元素本身移动到副标题的z-index上方。

我不知道该怎么做-弄乱两个元素的z-index并没有导致任何改变。我什至不知道如何只将标题放在小标题的前面。

h1 {
  font-weight: bold;
}

.boxy {
  background-color: white;
  border-radius: 2px;
  color: black;
  padding: 10px;
  border-style: solid;
  border-width: 4px;
  box-shadow: -10px -10px;
}

<h1><span class="boxy">title</span></h1>
<h3><span class="boxy">subheading blah blah blah</span></h3>

Answer 1

您需要使某些布局更加具体。我使用了flexbox将标头放在彼此下方，并将水平对齐方式指定给中心。希望这会有所帮助。

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontal alignment */
}

h1 {
  margin-bottom: 0px;
  position: relative;
  z-index: 5;
}

h1>.boxy {
  border-style: solid;
  border-width: 4px 4px 0 4px; /* No border at the bottom */
  box-shadow: -10px -10px;
}

h3>.boxy {
  border-style: solid;
  border-width: 4px;
  box-shadow: -10px -10px;
}

.boxy {
  background-color: white;
  border-radius: 2px;
  color: black;
  padding: 10px;
}

<div class="wrapper">
  <h1><span class="boxy">title</span></h1>
  <h3><span class="boxy">subheading blah blah blah</span></h3>
</div>

Answer 2

我将使用包含display: flex中的两个标题，如下面的代码片段所示。

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
}

h1,
h3 {
  margin: 0;
}

h1 {
  font-weight: bold;
  z-index: 1;
  margin-bottom: 15px;
}

.boxy {
  background-color: white;
  border-radius: 2px;
  color: black;
  padding: 10px;
  border: 4px solid black;
  box-shadow: -10px -10px;
}

h1 .boxy {
  border-bottom: none !important;
  padding-bottom: 5px !important;
}

<body>
  <main>
    <div class="title">

      <h3>
        <span class="boxy">subheading blah blah blah</span>
      </h3>
      <h1>
        <span class="boxy">title</span>
      </h1>
    </div>
  </main>
</body>

如何将框阴影和边框强制到z-index的后面

2 个答案: