无法将元素固定为矩形

Question

问题：deleting具有className text-block的元素不希望在矩形元素deleting.innerHTML上显示固定在屏幕上。如果我们缩放屏幕 - text-block将保留在os X上的位置，但必须保留deleting个元素。我已将pageXOffset的位置与 function createPoindetDel(text) { for (var i = 0; i < text.length; i++ ) { var textCoords = text[i].getBoundingClientRect(); var pointDel = document.createElement('p'); pointDel.innerHTML = '[x]'; pointDel.className = 'deleting'; pointDel.style.cssText = 'position:absolute; float:right; margin:0px; display:inline; cursor:pointer;'; pointDel.style.top = textCoords.top + pageYOffset + 'px'; pointDel.style.left = textCoords.right + pageXOffset + 'px'; text[i].appendChild(pointDel); } return pointDel; } function getDelete() { var text = document.getElementsByClassName('text-block'); createPoindetDel(text); var p = document.getElementsByClassName('deleting'); var tech = []; for (var j = 0; j < text.length; j++ ) { var index = j; tech[j] = (function () { p[index].addEventListener( 'click', function() {text[index].remove()} ); p[index].addEventListener( 'click', function() {p[index].remove()} ); })(); } } getDelete();相加，但它在宽度缩放方面没有帮助。

＆＃13;

＆＃13;

  .text-block {
  	max-width: 500px;
  	height: auto;
  	padding: 20px;
  	border-top: 2px #C4DF9B solid;
  	background-color: #EDF5E1;
  	margin-bottom: 0;
  }

  .text-block span {
  	font-size: 18px;
  	font-weight: bold;
  	color:  #111;
  	margin-top: 0;
  }

  .text-block p {
  	font-size:  15px;
  	margin-bottom: 0;
  	color: #111;

  }

＆＃13;

	<div class="text-block">
		<span>Horse</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
	<div class="text-block">
		<span>Pig</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
		<div class="text-block">
		<span>Mul</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>

＆＃13;

OBJECT_ONE

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么让它变得复杂。只需设置.text-block position:relative，然后将.deleting的相应固定绝对位置设置为相对于父.text-block的子元素。所有通过风格..

function createPoindetDel(text) {

  		for (var i = 0; i < text.length; i++ ) {

  			var textCoords = text[i].getBoundingClientRect();	

	  		var pointDel = document.createElement('p');
				pointDel.innerHTML = '[x]';
				pointDel.className = 'deleting';
				text[i].appendChild(pointDel);

		}
		
		return pointDel;
  	}

  	function getDelete() {

  		var text = document.getElementsByClassName('text-block');
  		  		
  		createPoindetDel(text); 

  		var p = document.getElementsByClassName('deleting');
  		var tech = [];
  		for (var j = 0; j < text.length; j++ ) {
  			var index = j;
  			tech[j] = (function () {	
				p[index].addEventListener( 'click', function() {text[index].remove()} );
		  		p[index].addEventListener( 'click', function() {p[index].remove()} );
  			})();
  		}
  	}

getDelete();

.text-block {
  	max-width: 500px;
  	height: auto;
  	padding: 20px;
  	border-top: 2px #C4DF9B solid;
  	background-color: #EDF5E1;
  	margin-bottom: 0;
    position:relative;
  }

  .text-block span {
  	font-size: 18px;
  	font-weight: bold;
  	color:  #111;
  	margin-top: 0;
  }

  .text-block p {
  	font-size:  15px;
  	margin-bottom: 0;
  	color: #111;

  }
  .deleting {
    position:absolute;
    float:right;
    margin:0px;
    top: 0;
    right: -20px;
    display:inline;
    cursor:pointer;
  }

<div class="text-block">
		<span>Horse</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
	<div class="text-block">
		<span>Pig</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>
		<div class="text-block">
		<span>Mul</span>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
	</div>