Проблема CSS: сидение текста ниже фиксированной позиции Div - PullRequest
Новая
       7

Проблема CSS: сидение текста ниже фиксированной позиции Div

0 голосов
/ 05 января 2010

У меня есть веб-сайт с фиксированным фоном и другое маленькое изображение, которое должно находиться в центре страницы, которую я успешно разместил, однако проблема возникает, когда я пытаюсь вставить еще один div, который должен содержать текст и содержание, оно находится под изображением.

Вы можете посмотреть мой пример здесь: (Пожалуйста, не беспокойтесь об URL! Это не что-то хитрое или отвратительное, это всего лишь моя грязь вокруг домена). http://liquid -shit.com / csstest.php (страница)

(ТАК разрешает мне публиковать только одну гиперссылку, так что вот ссылка на css без ссылки, уберите пробел между /)

http: / /liquid-shit.com/csstest.css (страница)

Как вы можете видеть внизу страницы, два маленьких белых цветочных изображения над текстом. Я попытался изменить порядок div в html и z-index и т. Д.

Мой CSS немного ржавый, и этот застрял у меня.

Заранее спасибо - Бен

Ответы [ 3 ]

1 голос
/ 05 января 2010

Фиксированное позиционирование всегда будет находиться над потоком (нормальное) позиционирование. Вам нужно изменить #content, чтобы использовать абсолютное или фиксированное позиционирование, а затем правильно расположить элемент.

Вот обновленный CSS: 

#content {
    width:200px;
    min-height:100%;
    margin:auto;
    z-index:1;
    position:absolute;
    left:50%;
    margin-left:100px; /* half the width to obtain proper offset */
}
0 голосов
/ 05 января 2010

Я получил эффект, который, я думаю, вы ищете, с помощью следующего CSS. (Это также устраняет необходимость в pattern div.) 

html, body {
background-color:#000f2f;
background-image:url(backgroundgradient.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom;
height:100%;
}

#content {
background-image:url(pattern.png) ; 
background-attachment: fixed;
background-repeat:no-repeat;
background-position:bottom;
width:200px;
min-height:100%;
margin:auto;
z-index:1;
}

РЕДАКТИРОВАТЬ : Исправлена ​​ошибка копирования / вставки из предыдущего редактирования.

0 голосов
/ 05 января 2010

Посмотрев на исходный код http://liquid -shit.com / csstest.php , вам нужно поместить свой контент и фиксированный блок в 2 отдельных div s 

<body>
    <div id="content">
        lorem ipsume says put your content here.
    </div>

    <div id="footer">
        &nbsp;
    </div>

</body>

Исправьте положение вашего #footer и задайте ему высокое значение z-index, чтобы содержимое #content шло за ним.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...