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

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

(подсказка: исходный код + положение: относительный)

Answer 2

Потому что вы использовали position: absolute, div позиционируется relativ e первому предку, который имеет фиксированное положение. Попробуйте вместо этого:

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

Добавляя position:relative на внешней DIV, внутренняя position:absolute ДИВ получает расположен по отношению к внешней один, а не в зависимости от того один дальше вверх по дереву определил положение. Как говорится в документации (цитируется ниже), внутренний div позиционируется «относительно его ближайшего расположенного предка».

Эти возможные позиции, копировать/вставить из MDN:

статический

Нормальное поведение. Свойства верхнего, правого, нижнего и левого полей не применяются.

относительной

Разложите все элементы, как если бы элемент не был расположен, а затем отрегулировать положение элемента, не меняя раскладку (и, таким образом, оставляя зазор для элемента, в котором он был бы, если бы не были расположены). Эффект позиции: относительный по таблице - * - группа, таблица-строка, столбец таблицы, таблицы-ячейки и элементы заголовка таблицы не определены.

абсолютное

Не оставляйте пространство для элемента. Вместо этого поместите его в заданное положение относительно его ближайшего расположенного предка или к содержащему блоку. Абсолютно позиционированные поля могут иметь поля, они не сжимаются с любыми другими полями.

липкимЭкспериментальная

Положение блока рассчитывается в соответствии с нормальным потоком (это называется позиция в нормальном потоке). Затем поле смещается относительно его корня потока и содержит блок, и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих полей. Когда ящик B находится на лифте, позиция следующего блока вычисляется так, как если бы B не был смещен.Эффект «position: sticky» на элементах таблицы такой же, как для «position: relative».

фиксированной

Не оставляйте пространство для элемента. Вместо этого расположите его в указанной позиции относительно окна просмотра экрана и не перемещайтесь при прокрутке. При печати расположите его в этом фиксированном положении на каждой странице.