Question

我創建了一個WordPress的簡碼的工作：

add_shortcode('picture', 'shortcode_func'); 

function shortcode_func(){ 
    return "<div><div style='border: 1px solid red; position : absolute; top: 10px; left: 10px; width: 30px; height: 30px;'></div><img src='http://localhost/jlin.jpg' id='wow'></div>"; 
} 

?> 

我想打一個div到我的形象，所以我創建了一個外層div其包裝內的div和圖像我將位置絕對分配給內部div，但它顯然沒有工作。內部div跳出它的容器，爲什麼？

Answer 1

錯誤...錯誤的地方把你的關閉div標記。試試這個：

return "<div><div style='border: 1px solid red; position : absolute; top: 10px; left: 10px; width: 30px; height: 30px;'><img src='http://localhost/jlin.jpg' id='wow'></div></div>"; 

（提示：比較兩個行尾）

[編輯]

OK試試這個：

return "<div style='position:relative'><div style='border: 1px solid red; position : absolute; top: 10px; left: 10px; width: 30px; height: 30px;'></div><img src='http://localhost/jlin.jpg' id='wow'></div>"; 

（提示：你的原代碼+該位置：相對）

Answer 2

因爲您使用了position: absolute，所以div被定位爲相對e給具有固定位置的第一個祖先。嘗試這個代替：

function shortcode_func(){ 
    return "<div style='position:relative'><div style='border: 1px solid red; position : absolute; top: 10px; left: 10px; width: 30px; height: 30px;'></div><img src='http://localhost/jlin.jpg' id='wow'></div>"; 
} 

通過在外層div添加position:relative，內position:absolute DIV被相對於外一個，而不是已經指定哪一個進一步向上的樹中的位置定位。正如文檔（下面引用）所述，內部div的定位「相對於其最接近的定位祖先」。

這些都是可能的位置，複製/粘貼MDN：

靜態

正常行爲。頂部，右側，底部和左側屬性不適用。

相對

鋪陳所有元素彷彿元件未定位，並且然後調整元件的位置，而不改變佈局（並因此留下間隙對於其中它會一直有它不是元素被定位）。位置：相對於表的效果 - * - 組，錶行，表列，表格單元和表標題元素未定義。

絕對

不要爲元素留出空間。相反，將它定位在相對於其最接近的定位祖先或包含塊的指定位置。絕對定位的盒子可以有邊距，它們不會與其他邊緣一起摺疊。

粘實驗

的框的位置根據到正常流計算（這被稱爲在正常流中的位置）。然後該盒子相對於其流根和包含塊而偏移，並且在所有情況下（包括表格元素）不會影響任何後續盒子的位置。當一個盒子B粘性定位時，下一個盒子的位置就像B沒有偏移一樣計算。'position：sticky'對錶格元素的影響與'position：relative'相同。

固定

不要爲元素留出空間。相反，將其放置在相對於屏幕視口的指定位置，並且在滾動時不會移動。打印時，將其放在每頁上的固定位置。