絕對位置不能正常工作

我想將id'absPos'的div放在絕對位置與其父div相關。但它不起作用，div被放置在頁面的左上角。絕對位置不能正常工作

我的代碼示例如下

<html> 
    <body> 
     <div style="padding-left: 50px;"> 
      <div style="height: 100px"> 
       Some contents 
      <div> 

      <div style="height: 80px; padding-left: 20px;"> 
       <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> 
       Some text 
      </div> 
     </div> 
    </body> 
</html>

你能幫我解決這個問題。在我的實際情況下，而不是紅色背景顏色，我已經放置了一個背景圖像。

Regards

來源

2010-09-30 Ram

將position:relative應用於父div。

<html> 
    <body> 
     <div style="padding-left: 50px;"> 
      <div style="height: 100px"> 
       Some contents 
      <div> 

      <div style="height: 80px; padding-left: 20px; position: relative;"> 
       <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> 
       Some text 
      </div> 
     </div> 
    </body> 
</html>

來源

2010-09-30 12:34:48

你需要給父母DIV relative位置第一：

<div style="height: 80px; padding-left: 20px; position:relative;">

來源

2010-09-30 12:34:52 Sarfraz

您需要聲明父DIV要麼position: relative或position: absolute本身。

relative是你在這種情況下尋找的。

來源

2010-09-30 12:34:53

如果要放置具有絕對位置的元素，則需要基本元素具有非默認值的位置值。

在您的情況下，如果您將父div的位置值更改爲'相對'，則可以解決問題。

來源

2010-09-30 12:36:04

我的元素的nth-parent具有默認位置以外的位置，但我需要將我的元素完全放置在窗口的左上角，與此問題完全相反。它可以幫助嗎？它爲什麼這樣工作？ – Qwerty 2016-06-01 08:32:52

您也可以將位置：絕對值應用於父級分部。下面

<html> 
    <body> 
     <div style="padding-left: 50px;"> 
      <div style="height: 100px"> 
       Some contents 
      <div> 

      <div style="height: 80px;position:absolute; padding-left: 20px;"> 
       <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> 
       Some text 
      </div> 
     </div> 
    </body> 
</html>

來源

2010-10-01 06:51:35 Rajasekar

總代碼如果像我一樣，你試圖在一個新元素的元素位置，浮動元素需要是其他的裏面，還不如兄弟姐妹。現在您的position:absolute;可以工作！

來源

2015-07-09 16:02:54

絕對位置不能正常工作

回答

相關問題