在一个div内部指定另一个div的准确位置

Add position: relative to the parent div.

position

• display: block, 可以让宽度和高度生效

• position: relative

  • 会导致四个属性生效: top, bottom, left, and right 

• 一个absolute 要放到relative里面才正常

  Add position: relative to the parent div.

  Absolutely positioned elements are positioned relative to their nearest positioned parent (e.g. the nearest parent element with a position of absolute or relative), so if they have no explicitly positioned parents (default position is static) they will be relative to the window.

• z-index决定了摆放遮挡规则

• position: fixed

  • 和absolute的不同在于, fixed的位置都是相对于浏览器窗口的, 没有外层参考元素的概念

• position: sticky

  • 可以滚动到某个位置, 然后就固定了

样例代码:

#inner {
    position: absolute;
    left: 250px;
    top: 100px;
}

#outer {
  position: relative;
}

js方案

var newParent = document.getElementById('new-parent');
var son = document.getElementById('son');
newParent.appendChild(son);

放到两个字之间

找到一段文字中的某一个位置

window.getSelection(); //这个可以获取选中的文字, 但是, 我要获取的是鼠标指向的文字.

function getClickPosition(e) {
    var xPosition = e.clientX;
    var yPosition = e.clientY;
}// 这个得到了鼠标指向的坐标.
e.pageX
e.pageY
//这个是另外一套

//这一套据说是firefox的
var range = document.createRange();
range.detach();
e.rangeOffset //e.rangeOffset is the location of the mousepointer within that string, 这个是鼠标下面的字
range.selectNode(e.rangeParent).toString() //这个是鼠标下面的整个文字.
//判断鼠标是否指在margin上面
if(e && e.rangeParent && e.rangeParent.nodeType == e.rangeParent.TEXT_NODE
   && e.rangeParent.parentNode == e.target)
  
    
//chrome 版本:
getWordAtPoint(e.target, e.x, e.y);
function getWordAtPoint(elem, x, y) {
  if(elem.nodeType == elem.TEXT_NODE) {
    var range = elem.ownerDocument.createRange();
    range.selectNodeContents(elem);
    var currentPos = 0;
    var endPos = range.endOffset;
    while(currentPos+1 < endPos) {
      range.setStart(elem, currentPos);
      range.setEnd(elem, currentPos+1);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.expand("word");
        var ret = range.toString();
        range.detach();
        return(ret);
      }
      currentPos += 1;
    }
  } else {
    for(var i = 0; i < elem.childNodes.length; i++) {
      var range = elem.childNodes[i].ownerDocument.createRange();
      range.selectNodeContents(elem.childNodes[i]);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.detach();
        return(getWordAtPoint(elem.childNodes[i], x, y));
      } else {
        range.detach();
      }
    }
  }
  return(null);
}    
    

// Firefox, Safari
    // REF: https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
    else if (document.caretPositionFromPoint) {
      range = document.caretPositionFromPoint(event.clientX, event.clientY);
      textNode = range.offsetNode;
      offset = range.offset;

// Chrome
// REF: https://developer.mozilla.org/en-US/docs/Web/API/document/caretRangeFromPoint
    } else if (document.caretRangeFromPoint) {
      range = document.caretRangeFromPoint(event.clientX, event.clientY);
      textNode = range.startContainer;
      offset = range.startOffset;
    }

    
// 一个通用的办法
(using caretPositionFromPoint or caretRangeFromPoint, credits f
document.caretRangeFromPoint (chrome) or document.caretPositionFromPoint (Firefox)

拿到光标位置

• https://drafts.csswg.org/cssom-view/#dom-document-caretpositionfrompoint
• 重点看eyal的答案, 还有chrisv的: https://stackoverflow.com/questions/2444430/how-to-get-a-word-under-cursor-using-javascript

var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);//拿到光标所在的位置的页面元素

• 阮一峰的: http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

核心概念:

• Range表示包含节点和部分文本节点的文档片段。
• Range可以用 Document 对象的 createRange方法创建，也可以用Selection对象的getRangeAt方法取得。另外，可以通过构造函数 Range() 来获得一个 Range 。
• https://developer.mozilla.org/zh-CN/docs/Web/API/Range

针对光标位置的操作:

Selection.modify() //实话说, 没弄明白这货咋用. 单独写一篇blog吧.
Range.insertNode() //在 Range 的起点处插入节点。 这个或许有用.

最终

<style>
/*设置光标闪烁, 借用了vscode的css */
@keyframes monaco-cursor-blink {
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#cur{
    animation: monaco-cursor-blink 1s step-start 0s infinite;
    /* 这里是从codemirror借用的 */
    background: white;
    width: 1px;
    height: 1em;
    display: inline-block;
    /* position: absolute;
    left: 250px;
    top: 100px; */
}
</style>
<script>
let range = document.caretRangeFromPoint(e.clientX, e.clientY);
range.insertNode(cur)
</script>

元素位置:

• element.offsetleft 只读的, 并且是相对父元素的.
• element.style.left

参考:

• 基础知识: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

• 拿到点击位置. https://www.kirupa.com/html5/getting_mouse_click_position.htm

• 这个貌似对路了: https://dzone.com/articles/writing-a-very-simple-js-editor