絶対配置された要素を自動的に配置することはできますか？

Question

divの要素が配置されている場合には、自動的に配置することは可能ですか？absolut？

コードスニペットには、3つのdiv要素があり、それらの間に配置されています。 #elem2と#elem3のCSSスタイルの指示を削除して、div要素の間にマージンを入れて配置する必要があるという一般的なルールを構成することは、どういうわけか可能ですか？ 10px？だから私は簡単に新しいdiv要素（可変高さ）をCSSクラスcolumn1と追加することができ、それぞれmargin-topとmargin-bottomを心配する必要はありません。

#containerGraph { 
 
    position: relative; 
 
    width: 700px; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
    overflow:scroll; 
 
} 
 

 
/* set the position attribute for all div elements inside the mainContainer*/ 
 
#containerGraph > div { 
 
    position: absolute; 
 
} 
 

 
.paramElement { 
 
    width: 200px; 
 
    max-height: 90px; 
 
    border-radius: 18px; 
 
    text-align: center; 
 
    background-color: #e6e6e6; 
 
    color: #4d4d4d; 
 
    font-family: Verdana, Helvetica, sans-serif; 
 
    padding-bottom:5px; 
 
    font-size: small; 
 
} 
 

 
.column1{ 
 
margin-left:10px; 
 
} 
 

 
#elem2{ 
 
margin-top : 40px; 
 
} 
 

 
#elem3{ 
 
margin-top : 117px; 
 
}

<div id="containerGraph" class="relative"> 
 

 
    <div class="paramElement column1" id="elem1"> 
 
    first 
 
    </div> 
 
    
 
    <div class="paramElement column1" id="elem2"> 
 
    second with very large text text text text text text text text text text text text text 
 
    </div> 
 
    
 
    <div class="paramElement column1" id="elem3"> 
 
    third 
 
    </div> 
 

 

 
</div>

Answer 1

これは奇妙なニーズである、と私は問題が提起され方法、それを解決する方法が表示されません。

は、しかし、absolute位置が必要な場合、それはしかし、明らかではない他の人の間でそれぞれに対して、唯一containerGraphに対する関連（及びそうに有用）であるべき、ということらしいです。

だから、溶液を、次のようになります。

absolute位置と、それはあなたが（旧absolute）他の<div>の

が含まれています、あなたのcontainerGraphの子<div>を挿入

• このスニペットで動作することがわかります：

  $('body').click(function() { 
   
      $('#elem2').remove(); 
   
      $('#sub-container').append('<div class="paramElement column1" id="elem4">fourth</div>'); 
   
  });

  #containerGraph { 
   
      position: relative; 
   
      width: 700px; 
   
      height: 400px; 
   
      border: 1px solid black; 
   
      overflow:scroll; 
   
  } 
   
  
   
  /* set the position attribute for all div elements inside the mainContainer*/ 
   
  #containerGraph > div { 
   
      position: absolute; 
   
  } 
   
  
   
  .paramElement { 
   
      width: 200px; 
   
      max-height: 90px; 
   
      border-radius: 18px; 
   
      text-align: center; 
   
      background-color: #e6e6e6; 
   
      color: #4d4d4d; 
   
      font-family: Verdana, Helvetica, sans-serif; 
   
      padding-bottom:5px; 
   
      font-size: small; 
   
  } 
   
  
   
  .column1{ 
   
  margin-left:10px; 
   
  margin-bottom: 10px; 
   
  } 
   
  /* 
   
  #elem2{ 
   
  margin-top : 40px; 
   
  } 
   
  
   
  #elem3{ 
   
  margin-top : 117px; 
   
  } 
   
  */

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
   
  Click anywhere to change 
   
  <hr /> 
   
  <div id="containerGraph" class="relative"> 
   
  <div id="sub-container"> 
   
      <div class="paramElement column1" id="elem1"> 
   
      first 
   
      </div> 
   
      
   
      <div class="paramElement column1" id="elem2"> 
   
      second with very large text text text text text text text text text text text text text 
   
      </div> 
   
      
   
      <div class="paramElement column1" id="elem3"> 
   
      third 
   
      </div> 
   
  </div> 
   
  
   
  </div>