100％寬度，填充和絕對定位

Question

我試圖在屏幕的某個部分進行div填充，將412px留空到左側和右側。 容易，嗯？

現在，當我添加position：absolute＆top：0時，填充消失。 元素檢查器顯示它是空的 - “填充”保持不變，但寬度：100％消失。 我用過這段代碼（沒有定位）：

<div style="height:73px; padding-left:413px; padding-right:413px;">
  <div style="width:100%; height:73px; background:url(top-fill-small.png);">
  </div>
</div>

那么，我怎么能絕對定位它（我需要稍后動畫），同時保留填充？ 我非常愛你的幫助。 提前致謝！

Answer 1

也許這個？

<div style="width:100%; position:absolute; top:0; left:0">
    <div style="height:73px; background:url(top-fill-small.png); margin-left:413px; margin-right:413px"></div>
</div>

Answer 2

從你需要使用position:absolute;的那一刻起position:absolute; 為什么不使用屬性left和right的，而不是填充？

HTML

<div style="height:73px;position:absolute;left:413px;right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

示例： http ： //jsbin.com/anega3

編輯

如果你需要嚴格使用填充，你可以設置left:0; right:0; left:0; right:0; 然后使用你已經擁有的填充。

HTML

<div style="height:73px;position:absolute;left:0;right:0px;padding-left:413px;padding-right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

示例： http ： //jsbin.com/anega3/2