title: Make div button over contenteditable element
body: <p>I am developping an angular app for a client, and I have to make a clickable button at the bottom right over a contenteditable element like the following image :</p>
  
  <p><a href="https://i.stack.imgur.com/J6XdW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J6XdW.png" alt="enter image description here"></a></p>
  
  <p>To add some difficulty, the content should be scrollable, but the button should stay a the same place and the text should avoid it.
  Of course, I can't add some marging/padding cause it will add some blank column/line at the bottom or at the right of the content editable zone.</p>
  
  <p>I can use any js/css tips/library.</p>
  
  <p>EDIT #1 :
  Ok I was not enough accurate with my question. 
  Here is some code :</p>
  
  <pre><code>&lt;p id="editfield"  contenteditable="true"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4yr7jsz1/24/" rel="nofollow noreferrer">http://jsfiddle.net/4yr7jsz1/24/</a></p>
  
  <p>As you can see, this is a "contenteditable" element. So the user can type come text in it. But the text should not pass below the round button, and it should be srcollable.</p>
  
  <p>EDIT #2 :
  Actually, I am almost good with the button. The ":before" element on the inserted element inside the contenteditale container allow me to place the zone I want the text to avoid. But the problem is I can't change any aprameter af a ":before" element via javascript...
  Here is the html :</p>
  
  <pre><code>&lt;body ng-app="MyApp"&gt;
    &lt;div id="editable-content" ng-controller="SimpleController"&gt;
      &lt;span id="clickable-zone"&gt;&lt;/span&gt;
      &lt;p id="editfield" contenteditable="true"&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The #clickable-zone is the button.</p>
  
  <p>Via javascript, I insert an empty element that will make the text goes around.</p>
  
  <pre><code>app.directive("contenteditable", function() {
    return {
      restrict: "A",
      link: function(scope, element, attrs) {
        var imgPhoto = $('&lt;div class="inside_element"&gt;&lt;/div&gt;');
        var mydiv = $('&lt;div class="myimage"&gt;&lt;/div&gt;').append(imgPhoto);
  
  
        element.bind("blur keyup change", function(event) {
          if(element.html() != mydiv[0].outerHTML &amp;&amp; element.html() != '') {
                      mydiv.prependTo(element);
          }
          else {
            mydiv.remove();
          }
        });
  
        $(document).on("click","span#clickable-zone",function() {
          console.log('click');
        });
      }
    };
  });
  </code></pre>
  
  <p>Then, I add css for all the different content that will let me position the "blank zone" inside the contenteditable element.</p>
  
  <pre><code>[contenteditable] {
    border: 2px dotted #ccc;
    background-color: #eee;
    padding: 2px;
    height: 200px;
    width: 500px;
    overflow-y: scroll;
  }
  
  .inside_element {
    float:right;
    clear:both;
    width: 100px;
    height: 100px;
    cursor: pointer;
    border-radius: 50%;
  }
  
  .myimage:before {
    content: '';
    display: block;
    float:right;
    height: 100px;
  }
  
  #clickable-zone {
    position: absolute;
    bottom: 4px;
    right: 4px;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    float:right;
    background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
    background-repeat: no-repeat; /*Prevent showing multiple background images*/
    background-size: 100px 100px;
    z-index: 5;
    cursor: pointer;
  }
  
  #editable-content {
    height: 208px;
    width: 508px;
    position: relative;
  }
  </code></pre>
  
  <p>I am not sure that there is a way to do it, any help would be great :)</p>
  
  <p>Thanks in advance !</p>