Есть ли способ для отдельного div игнорировать его родительское расположение div?

У меня есть div, положение которого отбрасывается его содержащим относительным расположением div. Хотя удаление родительского относительного позиционирования устраняет проблему, мы предпочли бы не реализовывать это как решение, так как это может сломать другие вещи. Есть ли способ заставить ребенка игнорировать его родительское позиционирование?

Ответ 1

К сожалению, нет способа сделать элемент "компенсирующим" для его родительского относительного позиционирования динамически с помощью CSS. Запрет переосмысления макета, и поскольку position:fixed не то, что вам нужно, ваши варианты:

Мануально компенсировать родительское позиционирование. Дайте дочерний элемент position:relative и смещения точно противоположны тому, что у родителя (вам нужно будет снова ввести точные значения). Минимальная суета, но теперь вы должны помнить о том, чтобы вручную синхронизировать две пары смещений (для родителя и ребенка). Размещение комментария, говорящего "если вы измените это, вы также должны изменить #THAT", поможет.
Динамически перемещать ребенка с помощью Javascript. Вы можете выполнить некоторые вычисления после завершения макета и переместить дочерний элемент туда, где вы хотите. Это не чистое решение, это может привести к кратковременному визуальному скачку и не будет работать для людей с отключенным Javascript (оставив ваш сайт визуально нарушенным). Единственным недостатком является то, что он не нуждается в обслуживании, если каркас не изменится радикально.

В целом, я рекомендую делать # 1 над # 2, и только если лучшее решение (изменение макета) недоступно вам.

Ответ 2

Если изменить "относительный" на "статический", это не вариант для вас... Я согласен с Джоном, вы должны использовать javascript для позиционирования дочернего div, а вот код с использованием javascript для выполнения опции 2 его ответ, в котором я переведу ребенка в реальное положение, учитывая всю относительную родительскую позицию:

var div = document.getElementById("banner");
var parentDiv = document.getElementById("banner");
var posT = 0;
var posL = 0;

while(parentDiv = parentDiv.offsetParent){
   posT += parentDiv.offsetTop;
   posL += parentDiv.offsetLeft;
}
posT -= div.offsetTop;
posL -= div.offsetLeft;
div.style.top = (-1)*posT+"px";
div.style.left = (-1)*posL+"px";

	.corpo{
	
		position:relative;
		margin-left:100px;
		margin_top:100px;
		background-color:yellow;
        border:#ccc 1px solid;
        padding:10px;
	
	}
	#banner{
	    
		position:absolute;
        top:250px; /* inicial value - goal position considering the document reference */
        left:150px; /* inicial value - goal position considering the document reference */
	    width:50px;
		height:50px;
		background-color:blue;
        font-size:9px;
        color:white;
        font-family:Arial;
	}

asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
<div class="corpo">
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
	<div id="banner"  >
      <strong>Banner</strong><br/>
      top: 250px<br/> 
      left:150px
    </div>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br> 
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</div>