Is there a way for a particular div to ignore it's parent div's positioning?

Question

I have a div whose position is thrown off by its containing div's relative positioning. While removing the parent's relative positioning fixes the issue, we would rather not implement this as a solution since it might break other stuff. Is there a way to force the child to ignore its parent's positioning?

Dewyeyed

Ignore the parent's positioning in what way? position:fixed would do that, but it might not be what you are after. – Haslet

I think you should rethink the placement of your child div – Longanimity

@Haslet right, because the child div is relying on its parent to a certain extent. I guess what I mean more specifically is to ignore whatever is changing in the parent's relative positioning - for the child to behave as though the parent had static positioning. – Dewyeyed

@ibu I agree but unfortunately it's not my site. – Dewyeyed

Why not have the div by itself, outside and under (in the code), if you do not want it affected by the parent div? Edit: do you have an example of the code and changes you tried? – Tribasic

@Tribasic that would be a great solution, but unfortunately it's not my site - I'm just looking for a solution that I can tell the site owner to implement, preferably as a rule for a certain class of div. – Dewyeyed

You could use positioning on the child to move it back to where it's "supposed" to be. So if the parent had position: relative; top: 5px; left: 5px;, you could give the child position: relative; top: -5px; left: -5px; to counteract it. – Glans

@jblasco what if top and left were variable? Can I grab the parent's values and *= -1? – Dewyeyed

If you could use jQuery then you could do this - you'd just have to set an interval which calls a function to updates the position of the child div every, say, 200ms. (technically, since jQuery is based on JavaScript, you could do this using JavaScript alone - but it may be a lot harder to code it from scratch without taking advantage of jQuery). – Veinlet

@Dewyeyed Not with purely CSS; you'd need to use JS to grab and set the values, or figure it out at the same time as it was originally set on the parent if you're doing it server-side or something. – Glans

Answer 1

Unfortunately there's no way to make an element "compensate" for its parent's relative positioning dynamically with CSS. Barring rethinking the layout and since position:fixed is not what you are after, your options are:

1. Manuallly compensate for parent's positioning. Give the child element position:relative and offsets exactly opposite from what the parent has (you will need to key in the exact values again). Minimum fuss, but you now have to remember to keep the two pairs of offsets (for parent and child) in sync manually. Placing a comment saying "if you change this you also have to change #THAT" will help.
2. Dynamically move the child with Javascript. You can perform some calculations after layout is done and move the child element back to where you want it to be. Not a clean solution in the least, it might result in a brief visual jump and will not work for people with Javascript disabled (leaving your site visually broken). The only upside is that it needs no maintenance unless your layout changes radically.

All in all, I 'd recommend doing #1 over #2, and only if the best solution (changing the layout) is not available to you.

Haslet

Okay, you said 2 with javascript. but maybe you can recommend some solution with javascript? jQuery for example. Thanks – Shakeup

@ПавелИванов: Solution to do what exactly? If you have a specific problem in mind why not ask a question of your own? :-) – Haslet

"if you change this you also have to change #THAT" -- For people working with modern browsers, "CSS Custom Properties" can be used here to provide a single parameter that needs changing. caniuse.com/css-variables – Retail

Answer 2

If changing the "relative" to "static" is not a option for you...I agree with Jon, you must use javascript to positioning the child div, and here is a code using javascript to perform the option 2 of his answer, where I move the child to a real osition considering all the relative parent position:

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>

Louden