मेरे पास एक कंटेनर है जिसके अंदर दो फ्लेक्स-बॉक्स हैं।

  1. पहला फ्लेक्स-बॉक्स मेरे कंटेंट बॉक्स का हेडर है।
  2. मेरे पास एक और फ्लेक्स-बॉक्स है जो सामग्री बॉक्स की सामग्री के लिए कंटेनर है।

जब भी मैं अपने ब्राउज़र को सिकोड़ता हूं, तो हेडर ओवरफ्लो हो जाएगा और सामग्री बॉक्स में मेरी सामग्री पर कुछ को कवर करेगा।

आदर्श रूप से, मैं चाहता हूं कि शीर्षलेख सामग्री को नीचे धकेले और इसे कवर न करे; हालाँकि, मैं यह नहीं समझ सकता कि मैं कहाँ गलत हो रहा हूँ।

किसी भी सहायता की सराहना की जाएगी।

 <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
user8321360 9 जुलाई 2019, 23:01

1 उत्तर

सबसे बढ़िया उत्तर

position: absolute को .header-wrapper से हटा दें।

शीर्षक को कंटेनर से थोड़ा ऊपर रखने के लिए, आप आवेदन कर सकते हैं:

transform: translate(0, -50%);
1
Furqan Rahamath 9 जुलाई 2019, 23:15