переместить изображение из ячейки таблицы в верхний левый угол окна браузера, используя только CSS - PullRequest
0 голосов
/ 14 мая 2009

Я делаю косметические изменения на сайте, но я могу изменить только CSS, а не aspx. Я хочу переместить изображение, находящееся внутри ячейки таблицы, установленной на страницу, примерно на 100 / 100px обратно в 0 / 0px.

У тега есть уникальный идентификатор, с которым я могу получить его, однако идентификатор таблицы не является уникальным, и установка фонового изображения на таблице из css влияет на другие части сайта. Я также попытался установить фоновое изображение на теле, однако эта страница представляет собой набор фреймов, где каждый фрейм ссылается на одну и ту же таблицу стилей. В результате я получаю фоновое изображение в каждом кадре.

Очень упрощенная версия HTML выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>move image</title>
        <style type="text/css">
            #imgLogo {/*how can I move this to 0,0?*/}
        </style>
    </head>
    <body>
        <table style="margin-left:100px; margin-top:100px;">
            <tr>
                <td>
                    <img id="imgLogo" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
                </td>
            </tr>
        </table>
    </body>
</html>

EDIT

Спасибо всем, кто сказал использовать абсолютную позицию. Это, конечно, исправило пример HTML, но не реальная проблема. Причина заключалась в том, что один из родительских элементов уже имел абсолютный набор позиции, но не имел координат. Установка этих элементов влево и верхняя позиция сделали свое дело.

Ответы [ 3 ]

1 голос
/ 14 мая 2009

Установите ccs таблиц в положение: относительное, а ваше изображение в положение: абсолютное и дайте ему верх: 0px и слева: 0px;

1 голос
/ 14 мая 2009

использовать позиционирование CSS:

#imgLogo {
position:absolute;
top:100px;
left:100px;
}
0 голосов
/ 14 мая 2009

Абсолютное позиционирование является ключом:

#imgLogo {
    position: absolute;
    top: 0;    // This is the default value, but whatever
    left: 0;   // ^
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...