title: how to fix an element's position and scale its size when the browser's window is resizing?
body: <p>I would like to know how can I fix an element's position contained in a div, and adjust its size when the browser's window is resizing.
  Here is my code: </p>
  
  <pre><code>var principale = document.getElementsByClassName("postItSet")[0];
  var card = document.createElement('div');
  card.className = "card";
  card.setAttribute("id", "mydiv" + id1);
  
  var cardBlock = document.createElement('div');
  cardBlock.className ="card-block";
  
  var cardTitle = document.createElement('div');
  cardTitle.className = "card-title";
  if (this.model.choice == true) {
     cardTitle.innerHTML = "anonymous"
  }
  else {
     cardTitle.innerHTML = this.profil.user.prenom + "";
  }
  
  var cardText = document.createElement('div');
  cardText.className = "card-text";
  cardText.setAttribute("id", "mydivheader");
  cardText.innerHTML = self.model.contenu;
  
  cardBlock.appendChild(cardTitle);
  cardBlock.appendChild(cardText);
  card.appendChild(cardBlock);
  principale.appendChild(card);
  principale.appendChild(document.createElement("br"));
  </code></pre>
  
  <p>Here is the css :</p>
  
  <pre><code>var st = document.getElementsByTagName("style")[0];
  st.innerHTML = ".card {position:fixed ;z-index: 9;background-color: #f1f1f1;text-align: center;border: 1px solid #d3d3d3;cursor: grab; word-wrap: break-word; width:auto; }";
  st.innerHTML += ".cardBlock {padding: 10px;cursor: grab; z-index: 10;background-color: #2196F3; color: #fff;  word-wrap: break-word;}";
  </code></pre>
  
  <p>I would like to make my page responsive. My goal is to add drag'n'drop "card" elements on a specific background image and be able to keep their position even if we resize the browser's window. I've tried many things, but in major cases, my cards loose their draggable-dropable properties. </p>
  
  <p>Thanks for your answers. </p>