Question

我在保持这个svg时遇到一些麻烦，并且在缩小时，flexbox按钮不会相互缩放。我想使用flexbox，以便我可以随时控制按钮和SVG覆盖此英雄镜头。

有没有更好的方法来实现这一目标，还是我搞砸了哈哈？任何建议都将不胜感激。

＆＃13;

* {
        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%;
        }
    }

＆＃13;

<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>

＆＃13;

Answer 1

您不能允许.herosvg-container持有 svg文本，以便能够增长到按钮的起点以下。

.herosvg-container规则中的此更改将使它们不重叠

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

Stack snippet

＆＃13;

* {
        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%;
        }
    }

＆＃13;

<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>

＆＃13;

Answer 2

您可以将svg容器和button容器包装在一起。这可以确保它们不会重叠。

示例：

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ob-hero-container {
  position: relative;
}

.overlay {
  width: 80%;
  max-width: 800px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.herosvg-container {
  margin-bottom: 1em; /* styling for demo */
}

.herobtn-container {
  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%;
  }
}

＆＃13;

<div class="ob-hero-container">
  <!-- VIDEO BACKGROUND -->
  <!--
    <video autoplay="" loop="" preload="auto" width="100%">
        <source src="http://media.rackroomshoes.com/uploads/awhitten/obsw/bts-video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" />Your browser does not support the video tag.</video>
-->
  <!-- END VIDEO BACKGROUND -->
  <!-- IMAGE BACKGROUND --><img src="https://s21.postimg.org/jp1vyijrb/sample.jpg" width="100%">
  <!-- END IMAGE BACKGROUND -->
  <div class="overlay">
    <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>
  <!-- /overlay -->
</div>

＆＃13;

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

2 个答案: