Как я могу сделать позицию: абсолютная; div внутри позиции: относительный; div работает в макете с центром в поле: 0 auto ;? - PullRequest
Новая
       17

Как я могу сделать позицию: абсолютная; div внутри позиции: относительный; div работает в макете с центром в поле: 0 auto ;?

1 голос
/ 03 сентября 2010

У меня есть центрированный макет с использованием margin:0 auto;, но один из моих дочерних элементов div не позиционирует себя абсолютно (относительно своего родителя).Страница выглядит нормально, пока размер окна не изменится.Затем дочерний div будет сдвинут вправо, а верхнее изображение (в другом div) будет обрезано.

Какие изменения кода мне нужно внести?

Вот CSS: 

body {
 padding: 0;
 margin: 0;
 display: table;
 text-align: center;
 font-family:sans-serif;
 background: #FFF url("/images/businessmanbg.jpg") no-repeat center top;
 width: 100%;
}
#wrapper {
 margin: 0 auto;
 position: relative;
}
#container {
 margin: 0 auto;
 text-align: left;
 position: relative;
}
#topbar {
 background: #036 url("/images/topbar.jpg") no-repeat center top;
 border:0;
 position: relative;
 margin-top: -22px;
 padding:0;
 text-indent:-9999px;
 display: block;
 height: 111px;
 width: 100%;
}
#content {
 background: url("/images/copy-bg.png");
 padding: 10px;
 position: absolute;
 margin-left: 900px;
 margin-top: 50px;
 text-align: left;
 width: 450px;
}

Спасибо за вашу помощь!

РЕДАКТИРОВАТЬ (14:18 CDT): По чьему-то предложению я перенес фон бизнесмена в #container, добавил фиксированную ширину в #container идобавил верхнюю и правую позиции в #content.Похоже, с позиционированием все в порядке, но фоновое изображение исчезло.Любая идея, почему?

Приведенный выше пример был обновлен с помощью следующего CSS (и я удалил оболочку DIV в HTML): 

    body {
    padding: 0;
    margin: 0;
    display: table;
    text-align: center;
    font-family:sans-serif;
    width: 100%;
}
#container {
    margin: 0 auto;
    text-align: left;
    position: relative;
    background: url("/images/businessmanbg.jpg") no-repeat center top;
    width: 1280px;
    z-index: 1;
}
#topbar {
    background: #036 url("/images/topbar.jpg") no-repeat center top;
    border:0;
    position: absolute;
    top: 0px;
    left: 0px;
    padding:0;
    text-indent:-9999px;
    display: block;
    height: 111px;
    width: 100%;
    z-index: 2;
}
#content {
    background: url("/images/copy-bg.png") repeat scroll 0 0 transparent;
    padding: 10px;
    position: absolute;
    top:120px;
    right:200px;
    width: 450px;
    z-index: 3;
}
ul, li, p {
    font-size: .95em;
    line-height: 1.5em;
}

Ответы [ 2 ]

4 голосов
/ 03 сентября 2010

Поскольку вы знаете ширину элемента с абсолютным позиционированием, вы можете установить left: 50% margin-left: -225px.

Это установит левый край контейнера в середину его оболочки, а затемперемещает его влево на половину его собственной ширины.Это будет работать, когда вы знаете ширину контейнера, но не ширину оболочки.

Это единственный известный мне метод, который будет работать.Это не очень красиво, но надеюсь, что это сработает для вас!

0 голосов
/ 03 сентября 2010

Не уверен, что именно вы пытаетесь достичь. Ваша оболочка и div контейнера не нужны вообще, и попробуйте использовать это как ваш #content class 

#content 
{
  background:url("/images/copy-bg.png") repeat scroll 0 0 transparent;
  float:right;
  padding:10px;
  text-align:left;
  width:450px;

}

...