Отображение контейнера div в нужном месте

Question

помогите пожалуйста, хочу сделать, что бы даный контейнер отображался в нужном месте на странице учитывая координаты в переменных $x, $y. Но в результате координаты вообще не учитываются, а контейнер отображается просто в столбик один под другим.

$y=520;
$x=540;
$content = "<a href='#'><div class='main'> <br>
            <img  style='height:200; width:200;' src='images/1.JPg'> <br> <br> <br> <br></div>
            <style>.main 
                {   color: black;
                    text-align: center;
                    width: 300;
                    height:275;
                    border: solid 1px black;
                    position: relative; 
                    top : $y;
                    left :  $x;
                }   
            </style> 
                <script src=''>
            </script>";
for ($i = 1; $i <= 20; $i++) {
     $y=$y+100;
     $x=$x+100;
     echo "$content <br>";
};

Answer 1

Добавьте к вопросу метку php
"координаты вообще не учитываются" - потому что position: relative; используйте для примера position: fixed; или position: absolute; тогда позиционирование будет от body.
В цикле for ($i = 1; $i <= 20; $i++) .... вы переписываете класс 20 раз, в этом нет смысла, лучше вынесите его в файл css
Лучше $content вынести за цикл и обозначит пустой строкой, а в цикле добавлять новый блок к строке, и после цикла вывести на страницу
В вашем примере для изменения координат нужно стили прописать так <div class='main' style='top:$y; left:$x;'></div>

Вот пример ваш без a и img, и размеры изменил для наглядности

<?php

$y=0;
$x=0;
$content = '';
for ($i = 1; $i <= 10; $i++) {
    $y=$y+21;
    $x=$x+21;
        $content .= 
            "<div class='main' style='top:$y; left:$x;'></div>
        <style>
          .main 
              {   color: black;
                  text-align: center;
                  width: 20px;
                  height:20px;
                  border: solid 1px black;
                  position: fixed;  
              }   
          </style>";
    
};
echo $content;
?>

Answer 2

в переменной $content в блоке стилей поменяйте

top : $y;
left :  $x;

на

top : ".$y."px;
left :  ".$x."px;

БЛОГ НА HUSL

Отображение контейнера div в нужном месте

Ответы (2 шт):