Позиция CSS, действующая как абсолютная

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

у меня есть:

<style> 
#container {position:absolute; top:0px; height:100%} 
.question {position:relative;border: 1px double black;} 
.question [scope=title] {position:relative; top:0px; color:black;font-size:28px; border-bottom: 1px double black;} 
.question [scope=body] {position:relative; top:0px; color:black;font-size:18px; } 
.question [scope=author] {position:relative;top:10px} 
.question [scope=tags] {position:relative;top:0px} 
</style>

и затем

<div ID="container"> 
     <div class="question"> 
      <div scope="title">A</div> 
      <div scope="body">B</div> 
      <div scope="author">C</b></div> 
      <div scope="tags">D</div> 
     </div> 
</div>

Я ожидаю, что автор ДИВ быть 10px ниже, чем обычно будет, и для следующего DIV, чтобы быть относительно этого. Однако «теги» и «автор» перекрываются.

Так раздражает, но я уверен, что есть простой ответ. Любая помощь?

источник

2012-06-16 rikAtee

У вас есть жирный закрывающий тег в авторском div ... (?) – Connor

Не влияет на CSS, компиляторы браузера просто игнорируют свободный закрывающий тег. – Terry

Это была ошибка, которую я сделал, удаляя код, чтобы увеличить понимание для вас, хорошие люди. Silly me – rikAtee

Попытка установить поле верхом на авторе вместо:

.question [scope=author] {position:relative;margin-top:10px}

источник

2012-06-16 01:09:08

Поскольку ваш элемент question вычисляет высоту дочерних элементов. Таким образом, его высота соответствует точной высоте детей, но один из детей (C) вы толкаете его на 10 пикселей, чтобы он перекрывал нижнюю часть.

Просто измените author и он будет работать.

.question [scope=author] {position:relative;top:0px}

источник

2012-06-16 01:01:00 Terry

Но я хочу, чтобы автор был на 10 пикселей ниже, чем «ваниль». Вопрос в том, как я могу сделать следующий сиблинг div относительно его предыдущего div? – rikAtee

Используется 'padding' или' margin'. – Terry

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

Поскольку вы хотите, чтобы элементы реагировали друг на друга, это предполагает использование другого механизма смещений, который происходит в потоке макета: заполнение или поля.

источник

2012-06-16 01:19:54

Позиция CSS, действующая как абсолютная

ответ

Смежные вопросы