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'相同。

固定

不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不会移动。打印时，将其放在每页上的固定位置。