Question

这是代码： http://jsfiddle.net/noamway/r8vMp/8/

    <div id="website" style="width:100%;">
    <div id="layoutAll" style="width:200px;margin:0 auto">
        <div id="layout" style="width:100%;position:relative;">
            <div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
            Hello world
            </div>
        </div>
    </div>
</div>

我喜欢“full_strip”将是所有页面宽度的100％。因为亲戚的亲戚我不能那样做。我不能删除父母的任何设置，所以我需要一个推荐或他的其他东西，告诉他忽略是亲戚。

谢谢，诺姆

Answer 1

删除ID为width:200px的div的#layout。重要的是不要对两个元素使用相同的id。重复的ID是危险。

<强> CODE：

<div id="website" style="width:100%;">
    <div id="layout" style="margin:0 auto">
        <div id="layout" style="width:100%;position:relative;">
            <div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
            Hello world
            </div>
        </div>
    </div>
</div>

的 DEMO FIDDLE

Answer 2

你基本上要求将相对位置Div内部动态生成的绝对位置Div与身体相关联，而不是与其相对父Div相关联。

位置relative和absolute始终与具有绝对或相对位置的第一个根父元素相关。这就是为什么不可能做你要求的。

唯一的解决方案是将“full_strip”Div放在其位置相对父元素之外并放入body标记。

Answer 3

要以未知的答案为基础，如果您希望文字保持居中，可以将text-align: center;添加到最深的嵌套div。

守则：

<div id="website" style="width:100%;">
    <div id="layoutAll" style="margin:0 auto">
        <div id="layout" style="width:100%;position:relative;">
            <div id="full_strip" style="width:100%;background-     
            color:black;color:white;height:100px;position:absolute;left:0; text-align:    
            center;">
                  Hello world
            </div>
        </div>
    </div>
</div>

JSfiddle

如何判断绝对位置忽略是父母的相对位置？

3 个答案: