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

因为您使用了position: absolute，所以div相对于具有固定位置的第一个祖先定位。试试这个：

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定位，而不是在树上指定位置的任何一个。正如文档（下面引用）所说，内部div被定位为“相对于其最接近的祖先”。

这些是可能的位置，从MDN复制/粘贴：

<强>静态

正常行为。顶部，右侧，底部和左侧属性不适用。

<强>相对

布置所有元素，就好像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下一个间隙，如果它没有被定位）。 position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

<强>绝对

不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

粘性 实验性

根据正常流量计算箱子的位置（这称为正常流量中的位置）。然后该框相对于其流根和包含块偏移，并且在所有情况下，包括表格元素，都不会影响任何后续框的位置。当盒B粘贴时，计算下一个盒子的位置，好像B没有偏移。 'position：sticky'对表元素的影响与'position：relative'相同。

<强>固定

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

Answer 2

错误...错误的地方放置你的结束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>";

（提示：比较两行结尾）

[编辑]

好的尝试这个：

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>";

（提示：您的原始代码+职位：亲属）

为什么内联css在wordpress中不起作用

2 个答案: