为什么嵌入式CSS在Wordpress中不起作用

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复制/粘贴：

静态的

正常行为。 top，right，bottom和left属性不适用。

相对的

布局所有元素，就好像未放置元素一样，然后在不更改布局的情况下调整元素的位置（因此，如果没有放置元素，则为元素留出空隙）。 position：相对于table-*-group，table-row，table-column，table-cell和table-caption元素的影响是不确定的。

绝对

不要为元素留出空间。 而是将其放置在相对于其最接近的祖先或包含块的指定位置。 绝对定位的盒子可以有边距，但不会与其他任何边距一起折叠。

粘性 实验

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

固定

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

Answer 2

Errr ...放置结束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>";

（提示：您的原始代码+位置：相对）