0

我创建了一个 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 跳出它的容器，为什么？

4

2 回答 2

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 上添加 a position:relative，内部position:absolutediv 相对于外部 div 进行定位，而不是树上指定位置的任何一个。正如文档（引用如下）所说，内部 div 的定位是“相对于其最近定位的祖先”。

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

静止的

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

相对的

布置所有元素，就好像该元素没有定位一样，然后调整元素的位置，而不改变布局（因此在没有定位的情况下为元素留下一个间隙）。position:relative 对 table-*-group、table-row、table-column、table-cell 和 table-caption 元素的影响是未定义的。

绝对

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

粘性 实验

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

固定的

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

于 2013-09-05T16:53:01.763 回答
0

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

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

于 2013-09-05T16:43:51.740 回答