css позиционирование и порядок объектов

Question

Я пытаюсь настроить сайт и слишком долго сижу на компьютере, поэтому я не знаю, где моя ошибка. Надеясь, кто-то может помочь человеку с базовыми знаниями о css.

Вот мой CSS:

#body {float: left; width: 100%; min-height:100%;} 

#header-wrap, 
#slider-wrap, 
#content-wrap, 
#footer-wrap { 
     float: left; 
     clear: both; 
     width: 100%; 
     } 

#header-wrap { 
     float: left; 
     width: 100%; 
     } 



#header {height: 100px;} 
#slider {height: 500px;} 
#content {padding: 0; text-align: left;} 

Я хотел бы добавить

position: absolute; top: 0px 

на # слайдера пленку так, что она начинается в верхнем правом углу под заголовком, но когда я делаю, что и #content перемещается вверх и помещается непосредственно под слайдером?

Что такое правильное позиционирование для этих объектов таким образом, что они показывают в следующем порядке: 1. заголовка 2. Слайдер (частично под заголовком) 3. Содержание

и на страницах, не слайдеров содержимое должно следовать за заголовком ???

любые подсказки для этого нуб была бы оценена

Answer 1

Это:

#header-wrap, 
#slider-wrap, 
#content-wrap, 
#footer-wrap { 
    float: left; 
    clear: both; 
    width: 100%; 
    } 

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

Вместо этого попробуйте добавить:

#slider-wrap { position: absolute; top: 0px }