Html 如何使一个flexbox在容器内移动另一个flexbox？_Html_Css_Flexbox

Html 如何使一个flexbox在容器内移动另一个flexbox？

html css

Html 如何使一个flexbox在容器内移动另一个flexbox？,html,css,flexbox,Html,Css,Flexbox,我有一个容器，里面有两个软盒第一个flex框是我的内容框的标题我有另一个flex box，它是内容框内容的容器每当我收缩浏览器时，标题都会溢出，覆盖了内容框中我的部分内容理想情况下，我希望标题将内容向下推，而不是覆盖它；然而，我不知道我错在哪里任何帮助都将不胜感激 <head> <style> body{ margin:0; padding:0; height:100%; width:100%; backgro

我有一个容器，里面有两个软盒

第一个flex框是我的内容框的标题

我有另一个flex box，它是内容框内容的容器每当我收缩浏览器时，标题都会溢出，覆盖了内容框中我的部分内容

理想情况下，我希望标题将内容向下推，而不是覆盖它；然而，我不知道我错在哪里

任何帮助都将不胜感激

 <head>
  <style>
   body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color:#F8F8F8;
   }
   .wrapper{
    padding-top:60px;
    padding-left:60px;
    display:flex;
    flex-wrap:wrap;
   }
   .content-box{
    flex:1 0 30%;
    min-height:360px;

    position: relative;
    background-color:white;
    border-radius:4px;
    margin:10px;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
   }
   .header-wrapper{ 
    flex:1; 
    background-color:purple;
    position: absolute;
    margin-left:5%;
    border-radius:2px;
    top: -15;
    min-height:75px;
    width:90%;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
   }
   .header{
   }
   .header-info{
   }
   .header p{ 
    position: absolute;
    color: white;
    top: 30;
    left: 12;
   }
   .header h1{ 
    position: absolute;
    color: white;
    top: -15;
    left: 10;
   }
   .content-wrapper{
    margin-top:5%;
   }
   .content{    
    border:1px solid black;
    margin-left:5.5%;
   }
  </style>
 </head>
 <body>
  <div class="wrapper">
   <div class="content-box">
    <div class="header-wrapper">
     <h1>Title</h1>
     <p>Subtext</p>
    </div>
    <div class="content-wrapper">
    <div class="content">
    <p>First Content Content</p>
    </div>
    </div>
   </div>
  </div>
 </body>
</html>


身体{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
背景色：#F8；
}
.包装纸{
填充顶部：60px；
左侧填充：60px；
显示器：flex；
柔性包装：包装；
}
.内容框{
弹性：1030%；
最小高度：360px；
位置：相对位置；
背景色：白色；
边界半径：4px；
利润率：10px；
-webkit盒阴影：0px 0px 6px 0px rgba（0,0,0.5）；
-moz盒阴影：0px 0px 6px 0px rgba（0,0,0.5）；
盒影：0px 0px 6px 0px rgba（0,0,0,0.5）；
}
.header包装器{
弹性：1；
背景颜色：紫色；
位置：绝对位置；
左缘：5%；
边界半径：2px；
前-15名；
最小高度：75px；
宽度：90%；
-webkit盒阴影：0px 0px 6px 0px rgba（0,0,0.5）；
-moz盒阴影：0px 0px 6px 0px rgba（0,0,0.5）；
盒影：0px 0px 6px 0px rgba（0,0,0,0.5）；
}
.标题{
}
.标题信息{
}
.p{
位置：绝对位置；
颜色：白色；
前30名；
左:12 ;；
}
.标题h1{
位置：绝对位置；
颜色：白色；
前-15名；
左:10 ;；
}
.内容包装器{
利润率最高：5%；
}
.content{
边框：1px纯黑；
左缘：5.5%；
}
标题
潜台词
第一内容

从

.header wrapper

中删除

位置：绝对

要将标题略置于容器上方，可以应用：

transform: translate(0, -50%);

绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。检查这修复了我的问题，但是否有可能将标题稍微放在容器上方，并且仍然是动态的？当然可以。现在您正在使用

top:-15

来完成此任务。相反，使用

transform:translate（0，-50%）。这应该能奏效。你可以增加或减少百分比。我已经用CSS更新了我的答案，以便你需要将标题向上移动。如果要使用px
进行控制，可以。只需将-50%
替换为-15px
。