CODEWITHSUNDEEP
phpwordpressshortcode
dramasea
dramasea

Reputation: 3490

Why are inline css doesn't work in wordpress

I created a wordpress shortcode :

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

?>

I want to make a div to on my image, so I created an outer div which wrap the inner div and image and I assign position absolute to the inner div, but it obviously didnt work. The inner div jump out of it's container, why ???

Upvotes: 0

Views: 706

Answers (2)

Benubird
Benubird

Reputation: 19497

Because you used position: absolute, the div is positioned relative to the first ancestor that has a fixed position. Try this instead:

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

By adding a position:relative on the outer div, the inner position:absolute div gets positioned relative to the outer one, rather than whichever one further up the tree has a position specified. As the documentation (quoted below) says, the inner div is positioned "relative to its closest positioned ancestor".

These are the possible positions, copy/pasted from MDN:

static

Normal behavior. The top, right, bottom, and left properties do not apply.

relative

Lay out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

sticky Experimental

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Upvotes: 1

aletzo
aletzo

Reputation: 2491

Errr... wrong place to put your closing div tag. Try this one:

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

(hint: compare the two line endings)

[edit]

OK try this one:

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

(hint: your original code + the position:relative)

Upvotes: 0

Related Questions