如何让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>
答
不能允许.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>
答
你可以换两个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>
我想，但我需要的按钮，退出视频对移动。另外，我希望能够以不同的方式浮动SVG和Flexbox按钮。所以他们都需要分开控制我想。 – adambwhitten
您仍然可以使用媒体查询隐藏按钮容器？ – sol
看看我试图在最终结果中完成什么。 – adambwhitten