javascript - 如何在div中定位div？

Question

我试图将一个 div 放在另一个 div 的右上角:

https://plnkr.co/edit/zhZdWf4KJZU02XF8zAjG?p=preview

但我需要在样式“textAreaStyle”中明确地将 div 的大小设置为宽度 600px 以便放置它:

“全选”是否可以在不明确设置宽度的情况下与 div 的顶 Angular 对齐？

function selectAll(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
        ;    
    if (doc.body.createTextRange) {
           range = document.body.createTextRange();
           range.moveToElementText(text);
           range.select();
    } else if (window.getSelection) {
           selection = window.getSelection();        
           range = document.createRange();
           range.selectNodeContents(text);
           selection.removeAllRanges();
           selection.addRange(range);
    }
}
    
document.onclick = function(e) {    
    if (e.target.className === 'click') {
           SelectText('selectme');
    }
};

.topcorner{
      position:absolute;
      top:0;
      right:0;
      border-style: solid;
      border-width:1px;
      border-color:lightgray;
}
      
.textAreaStyle {
      width: 600px;
      height: 150px;
      border-style: solid;
      border-width:1px;
      border-color:lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br></br><br></br><br></br>
<div style="position:relative;">
    <div onclick="selectAll('preview')" class="topcorner">Select All</div>
    <div class="textAreaStyle" contenteditable id="preview">
        test text
    </div>
</div>

Answer 1

不是将类添加到 contenteditable div，而是将类添加到它的父级。这会将 width 和 height 应用于容器元素，其中的元素将继承这些属性，因此相对于 contenteditable div 进行设置。

Updated Plunker

function selectAll(element) {
  var doc = document,
    text = doc.getElementById(element),
    range, selection;
  if (doc.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(text);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(text);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

document.onclick = function(e) {
  if (e.target.className === 'click') {
    SelectText('selectme');
  }
};

/* Styles go here */

.topcorner {
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.textAreaStyle {
  width: 400px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}

<div class="textAreaStyle" style="position:relative;">

  <div onclick="selectAll('preview')" class="topcorner">Select All</div>

  <div contenteditable id="preview">
    test text
  </div>

</div>

---

根据 I Stanley 的建议, float: right 也可以用来代替定位元素并在其上应用 top 和 right 零。这也将防止文本位于全选 div 后面。

function selectAll(element) {
  var doc = document,
    text = doc.getElementById(element),
    range, selection;
  if (doc.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(text);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(text);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

document.onclick = function(e) {
  if (e.target.className === 'click') {
    SelectText('selectme');
  }
};

/* Styles go here */

.topcorner {
  float: right;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.textAreaStyle {
  width: 400px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}

<div class="textAreaStyle" style="position:relative;">

  <div onclick="selectAll('preview')" class="topcorner">Select All</div>

  <div contenteditable id="preview">
    test text
  </div>

</div>