Question

我想在页面的红色部分旁边创建一个凉爽的侧边栏，但我希望它在其父元素的末尾结束，以使它不会到达蓝色部分。我该怎么办？

我的代码在该站点上似乎不起作用，但是如果将其插入W3Schools或其他页面上，它将起作用。这是我到目前为止的代码：

html {
  scroll-behavior: smooth;
}

main {
  width: 100%;
  height: 100%;
}

article {
  width: 100%;
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.sideBox {
  position: relative;
  height: 200%;
  overflow: hidden;
  width: 20%;
  background-color: white;
  transform: rotate(-20deg)
}

<!--Font-->
<link href="https://fonts.googleapis.com/css?family=Turret+Road:800&display=swap" rel="stylesheet">

<main style="background-color:red; ">
  <div class="sideBox">
  </div>
</main>
<article style="background-color:blue"></article>

Answer 1

没有一种完美的方法可以准确地将其终止于蓝色文章的开头，但是您可以将其隐藏在蓝色文章的后面。给您的文章指定z-index和相对位置，然后使边箱足够长，例如110％；

position:relative;
z-index: 999;

如何使元素在容器端结束？

1 个答案: