How Are The Widths of Nested Absolutely Positioned Elements Determined

How can I constrain the width of an absolutely positioned nested div?

I have found a partial solution, applying position relative to .middle. This should be applied to IE. Unfortunately, this messes around with the padding, but hopefully this will be a smaller issue to fix. This version is using the correct elements - not just divs.

<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .outer{
            border: solid 1px black;
            position: absolute;
            width: 200px;
        }
        .inner
        {
            position: absolute;
            width: auto;
        }
        .middle
        {
            border: solid 1px green;
            float: left;
        }
        .inner *
        {
            border: solid 1px red;
        }
        span{
            display: block;
        }
        .hide
        {
            display: none;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            .middle{
                position: relative;
            }
        </style>
    <![endif]-->
</head>
<body>
    <ul class="outer">
        <li class="middle">
            <span>outer</span>
            <ul class="hide"><li>lots and lots of inner text</li></ul>
        </li>
        <li class="middle">
            <span>outer</span>
            <ul class="hide"><li>lots and lots of inner text</li></ul>
        </li>
        <li class="middle">
            <span>outer</span>
            <ul class="inner"><li>lots and lots of inner text</li></ul>
        </li>
    </ul>
</body>

Allow absolutely positioned element to be wider than parent absolutely positioned element

First, your #controls need overflow:visible. Then, #size should be given an explicit left instead of right. And finally, .poplinks needs white-space: nowrap to prevent the wrap.

http://jsfiddle.net/VaWeK/11/

Absolute positioning for nested elements

Currently, CSS does not have a way to position element other than relative to its closest ancestor positioned relatively or absolutely. But since you use JS, you can change offset (left, top) for each element according to offsets of its ancestor elements and achieve needed results.

Improved version (taking borders into account) of Quirks mode function:

function getCssPropertyValue(elem, prop) {
    return window.getComputedStyle
         // Modern browsers.
         ? window.getComputedStyle(elem, null).getPropertyValue(prop)
         // IE8 and older.
         : elem.currentStyle.getAttribute(prop);
}

function findPos(obj) {
    var curleft = curtop = 0;

    if (!obj.offsetParent) {
        return;
    }

    do {
        curleft += obj.offsetLeft;
        curtop  += obj.offsetTop;

        // If not Opera and not IE8 (see http://tanalin.com/en/articles/ie-version-js/ )
        // Opera and IE8 return incorrect values otherwise.
        if (!window.opera && (!document.all || document.addEventListener || !document.querySelector)) {
            var blw = parseInt(getCssPropertyValue(obj, 'border-left-width'), 10),
                btw = parseInt(getCssPropertyValue(obj, 'border-top-width'), 10);

            if (blw) {
                curleft += blw;
            }

            if (btw) {
                curtop += btw;
            }
        }
    }
    while (obj = obj.offsetParent);

    return [curleft, curtop];
}

Update: A more clear, compact, fast, precise, future-proof and bullet-proof solution is to use element.getBoundingClientRect():

function getElementCoords(elem) {
    var root  = document.documentElement,
        body  = document.body,
        sTop  = window.pageYOffset || root.scrollTop  || body.scrollTop,
        sLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft,
        cTop  = root.clientTop  || body.clientTop  || 0,
        cLeft = root.clientLeft || body.clientLeft || 0,
        rect  = elem.getBoundingClientRect(),
        top   = Math.round(rect.top  + sTop  - cTop),
        left  = Math.round(rect.left + sLeft - cLeft);

    return {
        top  : top,
        left : left
    };
}

By the way, consider using jQuery's offset() where crossbrowser inconsistencies are already worked around out-of-the-box.

Issue with absolutely positioned div nested within another absolutely positioned div

Here's what I ended up with. Thanks, Sarfraz and sholsinger, for leading me in the right direction:

<body>
    <div style="height:100%;width:100%;">
        <div style="bottom:250px;position:absolute;top:0;width:100%">            
            <div id="map" style="height:100%;overflow:hidden;position:relative;width:100%;">
                <div id="controls" style="left:10px;position:absolute;top:10px;">
                </div>
                <div id="legend" style="bottom:45px;left:10px;position:absolute;">
                </div>
                <div id="logos" style="bottom:5px;left:10px;position:absolute;">
                </div>
            </div>
        </div>
        <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;">
        </div>
    </div>
</body>

So I basically just nested the "map" div in an absolutely positioned div and set it to "position;relative;".

There were two problems in the example I first posted:

As pointed out by sholsinger, the height of my "map" div was set to 100%, and this was sizing the div to 100% of the browser window. The "bottom:250px;" was simply pushing that div up and off the page. This was causing the controls to render off screen. I could have simply setup a new style on "controls" ("margin-top:260px;") to get the display working correctly, but this would not have solved the underlying problem correctly.
As pointed out by Sarfraz, the "map" div needed to have "position:relative;" defined on it so the absolutely positioned controls would display correctly.

The fixes above solve both of these problems.

Is it possible to absolutely position an element based on the bottom right corner of the element being positioned?

A simple tranform can do it. You may also add top:0;left:0 but it's not needed in this case:

#wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  transform: translate(-100%, -100%); /* this */
  background: green;
}

<div id='wrapper'>
  <div id='position-me'>
    Text is here
  </div>
</div>

Calculating height of absolute positioned nested childs

I've solved this issue with relative positioning.

For my complex "absolute position" animations i made function that translates absolute to relative.

.autoHeightParent {
  width: 500px; /* just for example */
  position: relative;
  display: flex;
} 
.absolutePosChild {
  /* relative position here must do absolutes' job here */
  position: relative; 
  display:flex;
  flex-direction: column;
  border: 1px solid green;
}
.absolutePosChild div {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="autoHeightParent">
  <div class="absolutePosChild">
    <div>
      Child content
    </div>
  </div>
  <div class="absolutePosChild">
    <div>
      Child content with nesting
    </div>
    <!-- !! NESTING  -->
    <div class="autoHeightParent">
      <div class="absolutePosChild">
        <div>
          We don't know this height too
        </div>
      </div>
      <div class="absolutePosChild">
        <div>
          G.Child 2
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>