0

ワードプレスのショートコードを作成しました：

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からコピー/貼り付けされています:

静的

通常の動作。上、右、下、および左のプロパティは適用されません。

相対的

要素が配置されていないかのようにすべての要素をレイアウトし、レイアウトを変更せずに要素の位置を調整します (したがって、要素が配置されていなかった場合に要素にギャップが残ります)。table-*-group、table-row、table-column、table-cell、および table-caption 要素に対する position:relative の効果は定義されていません。

絶対の

要素のためのスペースを残さないでください。代わりに、最も近くに配置された先祖またはそれを含むブロックに対して指定された位置に配置します。絶対配置ボックスにはマージンを設定できますが、他のマージンと一緒に折りたたむことはできません。

スティッキー エクスペリメンタル

ボックスの位置は、通常フローに従って計算されます (これを通常フローの位置と呼びます)。次に、ボックスはそのフロー ルートおよび包含ブロックに対して相対的にオフセットされ、テーブル要素を含むすべての場合において、後続のボックスの位置には影響しません。ボックス B が粘着的に配置されている場合、次のボックスの位置は、B がオフセットされていないかのように計算されます。テーブル要素に対する「position: sticky」の効果は、「position: relative」の場合と同じです。

修繕

要素のためのスペースを残さないでください。代わりに、画面のビューポートに対して指定された位置に配置し、スクロールしても移動しません。印刷するときは、すべてのページの固定位置に配置します。

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

(ヒント: 2 つの行末を比較してください)

[編集]

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

(ヒント: 元のコード + 位置:相対)

于 2013-09-05T16:43:51.740 に答える