Question

我正在尝试保持自定义形状的容器（父div）在向上滚动帖子（子div）时保持不变。

This is what it's supposed to look like all the time.

This is what it looks like when the posts are scrolled up.

我希望分界线保持这种状态。我尝试为每个元素使用z-index，但这似乎无济于事。

任何帮助将不胜感激！

#container {
  background: {
    color: background
  }
  ;
  width: 400px;
  height: 435px;
  margin-left: 20px;
  margin-top: 30px;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 12;
  display:inline-block;
  position: absolute;
}

#container:before {
  content: '';
  top: 0;
  right: 0;
  border-top: 70px solid {
    color: border
  }
  ;
  border-left: 70px solid transparent;
  background-color: transparent;
  width: 0;
  z-index: 999;
  position: absolute
}

#border {
  background: {
    color: border
  }
  ;
  width: 450px;
  height: 490px;
  margin-left: 800px;
  margin-top: 200px;
  z-index: 10;
  position: absolute;
}

#border:before {
  content: '';
  top: 0;
  right: 0;
  border-top: 60px solid {
    color: background
  }
  ;
  border-left: 60px solid transparent;
  background-color: transparent;
  width: 0;
  z-index: 10;
  position: absolute;
}

.posts {
  max-width: 400px;
  padding-bottom: 30px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 30px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  background-color: white;
  overflow-x: hidden;
  position: relative;
  z-index: 11;
}

<head>
  <title>{Title}</title>
  <link rel="shortcut icon" href="{Favicon}">
  <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description}
  <meta name="description" content="{MetaDescription}" /> {/block:Description}

  <meta name="color:background" content="#FFFFFF" />
  <meta name="color:border" content="#000000" />
</head>

<body>
  <div id="border">
    <div id="container">
      {block:Posts}
      <div class="posts">
        ...
      </div>
    </div>
  </div>
</body>

如何使边框的某一部分保持在子div内容之上？

0 个答案: