css - 如何让这个 SVG 和按钮在缩放时不重叠？

Question

我在阻止这个 svg 和 flexbox 按钮在缩小时相互缩放时遇到了一些麻烦。我想使用 flexbox，这样我就可以随时控制这个英雄镜头上的按钮和 SVG 叠加层。

有没有更好的方法来完成这个，或者我搞砸了哈哈？如有任何建议，我们将不胜感激。

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .ob-hero-container {
        position: relative;
    }
    
    .herobtn-container {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
        position: absolute;
        top: 60%;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .herosvg-container {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
        position: absolute;
        top: -20%;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .herobtn-wrapper {
        border: 2px solid transparent;
        flex-grow: 1;
    }
    
    .herobtn1 {
        background-color: #000;
        color: #fff;
        padding: 10px;
        /*margin: .1em;*/
        text-align: center;
    }
    /* Tablet */
    
    @media (min-width:30em) and (max-width:50em) {
        .herobtn-wrapper {
            flex-basis: 50%;
        }
    }
    
    @media (max-width:50em) {
        .herobtn-container {
            position: relative;
            width: 100%;
        }
    }
    /* Mobile */
    
    @media (max-width:30em) {
        .herobtn-wrapper {
            flex-basis: 50%;
        }
    }

<div class="ob-hero-container">
    <!-- IMAGE BACKGROUND --><img src="https://s21.postimg.org/jp1vyijrb/sample.jpg" width="100%">
    <!-- END IMAGE BACKGROUND -->
    <div class="herosvg-container"><img src="http://svgshare.com/i/23M.svg" width="100%"></div>
    <div class="herobtn-container">
        <div class="herobtn-wrapper">
            <div class="herobtn1">SHOP WOMEN'S</div>
        </div>
        <div class="herobtn-wrapper">
            <div class="herobtn1">SHOP MEN'S</div>
        </div>
        <div class="herobtn-wrapper">
            <div class="herobtn1">SHOP KIDS</div>
        </div>
        <div class="herobtn-wrapper">
            <div class="herobtn1">WATCH VIDEO</div>
        </div>
    </div>
</div>

Answer 1

您不能允许包含 svg 文本 的 .herosvg-container 能够增长到低于按钮的起点。

.herosvg-container 规则的改变将使它们不重叠

  top: 0;               /*  changed  */
  height: 60%;          /*  changed  */
  /*  bottom: 0;            removed  */

堆栈片段

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .ob-hero-container {
        position: relative;
    }
    
    .herobtn-container {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
        position: absolute;
        top: 60%;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .herosvg-container {
        width: 80%;
        max-width: 800px;
        margin: 0 auto;
        position: absolute;
        top: 0;               /*  changed  */
        height: 60%;          /*  changed  */
        /*  bottom: 0;            removed  */
        right: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .herobtn-wrapper {
        border: 2px solid transparent;
        flex-grow: 1;
    }
    
    .herobtn1 {
        background-color: #000;
        color: #fff;
        padding: 10px;
        /*margin: .1em;*/
        text-align: center;
    }
    /* Tablet */
    
    @media (min-width:30em) and (max-width:50em) {
        .herobtn-wrapper {
            flex-basis: 50%;
        }
    }
    
    @media (max-width:50em) {
        .herobtn-container {
            position: relative;
            width: 100%;
        }
    }
    /* Mobile */
    
    @media (max-width:30em) {
        .herobtn-wrapper {
            flex-basis: 50%;
        }
    }

<div class="ob-hero-container">
    <!-- IMAGE BACKGROUND --><img src="https://s21.postimg.org/jp1vyijrb/sample.jpg" width="100%">
    <!-- END IMAGE BACKGROUND -->
    <div class="herosvg-container"><img src="http://svgshare.com/i/23M.svg" width="100%"></div>
    <div class="herobtn-container">
        <div class="herobtn-wrapper">
            <div class="herobtn1">SHOP WOMEN'S</div>
        </div>
        <div class="herobtn-wrapper">
            <div class="herobtn1">SHOP MEN'S</div>
        </div>
        <div class="herobtn-wrapper">
            <div class="herobtn1">SHOP KIDS</div>
        </div>
        <div class="herobtn-wrapper">
            <div class="herobtn1">WATCH VIDEO</div>
        </div>
    </div>
</div>