В CSS, чтобы логотип располагался поверх центрального макета и торчал влево?

Question

Я действительно застрял здесь...

У меня есть макет сайта с центральным макетом (его ширина около 922 пикселей, по центру страницы)... У меня есть маленький логотип, который находится слева вверху, но он прикреплен примерно на 10 пикселей слева от центрального дизайна., Если вы можете себе представить, это как бы торчит слева от дизайна...

Теперь мне сказали, что абсолютное позиционирование сделает это возможным. Но я не могу понять, как логотип будет работать с абсолютным позиционированием, если сам дизайн находится в центре страницы. Я думаю, что это для того, чтобы убедиться, что он работает в IE6... Я попытался разместить логотип в центральном заголовке, а затем применить отрицательное поле margin-left: -10px; который работает, но я читал, что это не работает в IE6.

Answer 1

Трудно сказать без фрагмента кода, но, вероятно, проблема в том, откуда ваш элемент получает "абсолютное" позиционирование. "Абсолют" является неправильным. Это действительно означает "абсолютный... относительно ближайшего родителя". Поэтому, если в вашем дизайне нет родительского элемента со стилем css "position", он будет брать свою позицию из элемента body (который может иметь некоторый отступ / отступ в зависимости от вашего браузера).

Добавление позиции: относительная; для элемента, который вы хотите использовать в качестве "самого внешнего" контейнера, вы сможете указать абсолютное положение для элемента в нем и указать оттуда ваши точные координаты.

Answer 2

Когда вы размещаете свой логотип абсолютно, его нужно размещать относительно чего-либо. Это что-то, как правило, край окна просмотра. Если логотип находится внутри элемента, который расположен относительно этого, он будет расположен относительно этого элемента. Таким образом, ответ должен сделать вашу центрированную страницу display:relative; поэтому логотип всегда выравнивается по странице, а не по краю окна браузера. Вот пример:

HTML:

<div id="centeredpage">
   <img id="logo"... />
</div>

CSS:

body {
   text-align:center;
}
#centeredpage {
   width:922px;
   margin:0 auto;
   text-align:left;
   position:relative;
}
#logo {
   position:absolute;
   top:0;
   left:-10px;
}

Надеюсь, это поможет.

Answer 3

Установите "положение: относительное" в контейнере div.

<style type="text/css">
    div.page {
        position: relative;
        margin: 0 auto;
        width: 922px;
    }
    div.page img.logo {
        position: absolute;
        left: -10px; top: 0;
    }
</style>


<div class="page">
    <img class="logo" ... />
</div>

Хотя.. Я бы предпочел, чтобы это работало без абсолютного позиционирования.