Question

我已经阅读并尝试过很多"how to extend child div beyond parent div"个帖子（价值几个小时），并且还在Firebug中进行了实时测试，但我无法弄清楚如何扩展儿童div父div，有多个定位和溢出约束。

目标（参考下面的代码段）

将valid alert显示在form_container之外。
滚动时滚动valid alert，即不要使其“固定”。

约束

form_container必须居中。
form_container必须有overflow-y: auto。

实际实施很复杂，所以我简化了以下结构：

<p>test</p>
<p>test</p>
<div id="form_container">
    <form id="my_form">
    <div class="message_container">
        <div class="valid_alert">valid alert</div>
    </div>
    <p>filler</p>
    <p>filler</p>
    <div class="message_container">
        <div class="valid_alert">valid alert</div>
    </div>
    <p>filler</p>
    <p>filler</p>
    <p>filler</p>
    </form>
</div>

我尝试过的事情

如上所述，我尝试了很多方法，例如包装父div并在不同级别应用不同的overflow和position属性，但为了减少这篇文章的复杂性，准系统demo on jsFiddle可能更有用，包含上面的HTML和CSS：

#form_container {
    background:salmon;
    height:100px;
    overflow-y:auto;
    margin:auto;
    width:200px;
    position:absolute;
    left:0;
    right:0;
}

.message_container {
    position:absolute;
}

.valid_alert {
    position:absolute;
    background:limegreen;
    top:-25px;
    white-space: nowrap;
}

的jsfiddle

http://jsfiddle.net/rwone/LZxNm/

我对任何满足目标和约束的建议持开放态度，例如重构HTML结构甚至使用Javascript / jQuery魔法。

修改

作为参考，添加了一些通过Firebug控制台发现的jQuery offset()机制，这个机制可以用作解决方案：

var myDiv = $("#my_div"); // create jQuery object

myDiv.offset(); // find the current offset

Object { top=119, left=510.51666259765625}

var currentOffset = myDiv.offset(); // assign the current offset to a jQuery variable

currentOffset; // view the value of the jQuery variable

Object { top=119, left=510.51666259765625}

new_top = currentOffset['top'] + 10; // create a new value of the top offset

129

new_left = currentOffset['left'] + 10; // create a new value of the left offset

520.5166625976562

myDiv.offset({top:new_top, left:new_left}); // set the new values as the offset

myDiv.offset; // view the new offset values

Object { top=129, left=520.5166625976562}

如何扩展绝对定位的子div超出居中的父div与溢出？

0 个答案: