Есть ли способ для конкретного div игнорировать позиционирование родительского div? - PullRequest
Новая
       1

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

12 голосов
/ 12 января 2012

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

Ответы [ 2 ]

12 голосов
/ 12 января 2012

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

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

В общем, я бы рекомендовал делать № 1 вместо № 2, и только если вам не доступно лучшее решение (изменение макета).

0 голосов
/ 04 августа 2015

Если вы не можете изменить «относительный» на «статический» ... Я согласен с Джоном, вы должны использовать 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>
...