如何讓SVG和按鈕在縮放時不重疊？

我在保持此svg方面遇到了一些麻煩，並且在縮小比例時Flexbox按鈕不能相互縮放。我想使用flexbox，以便我可以隨時控制按鈕和SVG覆蓋這個英雄鏡頭。如何讓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>

來源

2017-08-28 adambwhitten

不能允許.herosvg-container保持SVG的文本能夠低於起點，以成長爲按鈕。

這種變化.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>

來源

2017-08-28 15:01:33 LGSon

你可以換兩個svg容器和容器button一起。這確保了它們不會重疊。

例子：

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

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

來源

2017-08-28 14:18:11 sol

我想，但我需要的按鈕，退出視頻對移動。另外，我希望能夠以不同的方式浮動SVG和Flexbox按鈕。所以他們都需要分開控制我想。 – adambwhitten

您仍然可以使用媒體查詢隱藏按鈕容器？ – sol

看看我試圖在最終結果中完成什麼。 – adambwhitten

如何讓SVG和按鈕在縮放時不重疊？

回答

相關問題