时间戳

首页 > 解决方案 > 如何修复改变页面 z-index 堆叠顺序的剪辑路径？

html - 如何修复改变页面 z-index 堆叠顺序的剪辑路径？

问题描述

https://jsfiddle.net/9gqbne6j/1/

<div class="row">
  <div class="row-inner">
    <div class="row-background"><div class="row-background-inner">
    
    </div></div>
    <div class="row-content">
    <section class="first-section">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Circle-icons-flame.svg/1024px-Circle-icons-flame.svg.png" class="icon">
      <h2 class="section-heading">
      Some Heading
      </h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper justo a neque mollis iaculis.
      </p>
      <button class="read-more">Read More</button>
      </section>
    </div>
  </div>
</div>

html,
body {
  background-color: grey;
  color: white;
  position: relative;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body::after {
  content: "";
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAuNSA2MDQwLjEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMjMxZjIwO29wYWNpdHk6MC43O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMzIwLjUgMjQ0OC45MiAwIDYwNDAuMSAwIDYwNDAuMSAwIDAgMzIwLjUgMjQ0OC45MiIvPjwvc3ZnPg==);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 29.66%;
  background-position: right 3% top 40%;
}

.row-inner {
  position: relative;
  clip-path: polygon(-38% 50%,128% 110%,128% -10%)
}

.row-background-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i0.wp.com/www.wagpets.com/wp-content/uploads/2020/04/pembroke-welsh-corgi-appearance-and-vital-stats.jpeg?resize=1429%2C956&ssl=1);
  background-size: cover;
  background-repeat: no-repeat;
}

.row-content {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.first-section {
    padding: 2em 1em;
   display: flex;
   flex-flow: column;
   align-items: center;
   max-width: 33%;
   z-index: 9;
}

.section-heading {
  margin-bottom: 0.5em;
}

.icon {
  width: 50px;
  height: 50px;
}

.read-more {
  padding: 0.5em 1em;
  background-color: steelblue;
  color: white;
  border: 0;
}

以上是我要解决的问题的一个最小示例。它是从一个更大的页面中提取的，所以我希望可以通过 CSS 修复而不是完全重组 DOM。

因此， .row-inner 元素上有一个剪辑路径。如果启用了剪辑路径，则 .first-section 文本显示在 body::after 背景下方，但如果禁用剪辑路径，则文本显示在 body::after 背景上方。

有没有办法让 .first-section 出现在 body::after 背景上方，并且仍然启用剪辑路径？

我从之前的问题中读到它与剪辑路径改变元素的渲染顺序有关，但在这种情况下我找不到解决这个问题的方法，我还没有尝试过。

如果仅通过 CSS 无法修复，那么重新排序 DOM 以修复它的最简单方法是什么？

谢谢

标签： htmlcsspositionz-indexclip-path

解决方案

规则clip-path需要分配给更多的子元素。

.row-background-inner通过将其从中删除来指定此规则.row-inner。

html,
body {
    background-color: grey;
    color: white;
    position: relative;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body::after {
    content: "";
    position: absolute;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAuNSA2MDQwLjEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMjMxZjIwO29wYWNpdHk6MC43O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMzIwLjUgMjQ0OC45MiAwIDYwNDAuMSAwIDYwNDAuMSAwIDAgMzIwLjUgMjQ0OC45MiIvPjwvc3ZnPg==);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 29.66%;
    background-position: right 3% top 40%;
}

.row-inner {
    position: relative;
    /*clip-path: polygon(-38% 50%,128% 110%,128% -10%);*/
}

.row-background-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://i0.wp.com/www.wagpets.com/wp-content/uploads/2020/04/pembroke-welsh-corgi-appearance-and-vital-stats.jpeg?resize=1429%2C956&ssl=1);
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: polygon(-38% 50%, 128% 110%, 128% -10%);
}

.row-content {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.first-section {
    padding: 2em 1em;
    display: flex;
    flex-flow: column;
    align-items: center;
    max-width: 33%;
    z-index: 9;
}

.section-heading {
    margin-bottom: 0.5em;
}

.icon {
    width: 50px;
    height: 50px;
}

.read-more {
    padding: 0.5em 1em;
    background-color: steelblue;
    color: white;
    border: 0;
}
<div class="row">
    <div class="row-inner">
        <div class="row-background"><div class="row-background-inner"></div></div>
        <div class="row-content">
            <section class="first-section">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Circle-icons-flame.svg/1024px-Circle-icons-flame.svg.png" class="icon" />
                <h2 class="section-heading">
                    Some Heading
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper justo a neque mollis iaculis.
                </p>
                <button class="read-more">Read More</button>
            </section>
        </div>
    </div>
</div>

推荐阅读