CSS позиционирование относительно фиксированного / абсолютного - PullRequest
Новая
       1

CSS позиционирование относительно фиксированного / абсолютного

3 голосов
/ 11 июня 2011

Извиняюсь, если я выгляжу довольно "нубистски" с CSS.Я пытался установить следующее ... 

#0 {
 width: 100%;
 height: y;
 border: 1px solid black;
}   
#a {
 position: fixed;
 float left;
 width: x;
 height: y;
 border: 1px solid black;
}
#b {
 position: relative;
 float: left;
 width: x;
 height: y;
 border-right: 1px solid black;
}

/* HTML */
<div id="0">Some div...</div>
<div id="a">Another div</div>
<div id="b">Final div...</div>

По какой-то причине, если я попытаюсь расположить #b ниже #a, #b появится поверх #a, если я не объявлю его положение каклибо статический, либо абсолютный, но затем потребуется вручную расположить верхние / левые свойства, и это также не отображается должным образом для всех браузеров.Любая помощь будет принята с благодарностью!

Исправьте это сейчас!(пришлось объявить html, body :( width: 95%;)) Спасибо за все советы, ребята!

Ответы [ 2 ]

4 голосов
/ 11 июня 2011

Прежде всего, пара исправлений: # 0 нужно назвать как-нибудь еще, потому что идентификаторы не могут начинаться с цифры.Вы также пропускаете: в свойстве float для #a.Не уверен, что с 'x' и 'y' для высоты / ширины, либо - я предполагаю, что это только примеры?

Фиксированные и абсолютные элементы находятся вне потока документов.То есть они не занимают места так далеко, как элементы с нормальным расположением.

Следовательно, фиксированный элемент будет иметь относительный элемент над ним в вашем примере, как вы обнаружили, поскольку они могут занимать одно и то же пространство xy.,Если вы имели абсолютное значение, top: 0;left: 0, то же самое произойдет.

Далее, у вас был один как float (почти), поэтому давайте рассмотрим, что float изменяет все это позиционирование.Поплавки «особенные» в том, как они расположены.Они находятся в потоке, но будут как можно выше и в направлении движения.Если они слишком широки, чтобы поместиться рядом с другим плавающим содержимым в этой строке, они переходят к следующей строке.

Вы можете сделать 

<style>
 #a
  {
  float:left;
  height:100px;
  width:150px;
  background-color:black;
  }
  #b
  {
  clear:left;
  height:100px;
  width:150px;
  background-color:green;
  }
 </style>
 <div id='a'>aaaaa aaa</div>
 <div id='b'>bbb bbb</div>

«Очистить» означает, что элемент появитсяпод предыдущими элементами, которые плавают.#b будет на следующей строке, под #a.Вы также можете сделать так, чтобы #a имел большое поле справа или был достаточно широким, чтобы заполнить любой контейнер и не оставлять места для #b, чтобы #b располагался ниже #a, а не рядом с ним.

0 голосов
/ 11 июня 2011

Я не верю, что ваш синтаксис width: x и height: y правильный, а в свойстве #a float отсутствует двоеточие. Кроме того, идентификаторы не могут начинаться с цифр, поэтому #0 следует заменить на другое. Вот код, который заставляет все работать правильно. Вы должны были избавиться от своего фиксированного и относительного положения. CSS: 

#zero {
 width: 100%;
 border: 1px solid black;
}   
#a {
 float: left;
 border: 1px solid black;
}
#b {
 float: left;
 border-right: 1px solid black;
}

И HTML: 

<div id="zero">Some div...</div>
<div id="a">Another div</div>
<div id="b">Final div...</div>
...