2015-09-16 23 views
0

Я хочу разместить div над другим. Я спросил об этом на днях, и кто-то объяснил, как работает z-index (он или она сказал: «Элемент с большим номером z-индекса будет покрывать элемент с меньшим»)Как разместить div над другим

Я добавил еще один две дивы и не могу получить четвертую (футер моего «документа»/сайт), чтобы быть на вершине других

Вот друга день вопрос/нить: How to place a div over another

Кто-то спросил, что я хотел делать. Я только начинаю и следую базовому курсу. Последнее «назначение» - это создание резюме.

Вот их (пример):

http://i.stack.imgur.com/xLgMM.png

Однако, я хотел бы изменить это немного.

Я не хочу никаких полей на странице (например, слева от их синей левой панели), я не хочу закругленных углов, и мне не нужны пробелы между div. То есть, я хочу, чтобы весь мой «сайт» покрыт цветом:

Бежево-розоватый (# F5F0EC) на заднем плане, розовый заголовок, серый нижний колонтитул, а затем светло-серый как край слева, на верхушка всех из них.

Это то, что я до сих пор в моем CSS:

#header { 
    width: 106%; 
    background-color: #E8D5C6; 
    height: 100px; 
    margin-top: -8px; 
    margin-left: -8px; 
    position: absolute; 
    z-index: 2; 
} 

.left { 
    width: 15px; 
    background-color: #919191; 
    height: 695px; 
    margin-left: -8px; 
    margin-top: -8px; 
    position: relative; 
    z-index: 3; 
} 

.right { 
    width: 106%; 
    background-color: #F5F0EC; 
    height: 695px; 
    margin-left: -8px; 
    margin-top: -8px; 
    position: relative; 
    margin-top: -645px; 
    z-index: 1; 
} 

#footer { 
    width: 106%; 
    background-color: #404145; 
    height: 50px; 
    margin-left: -8px; 
    position: relative; 
    z-index: 4; 
} 

Похоже, мой сноска ДИВ ниже фона («правильный» один с цветом # F5F0EC), и я хочу, чтобы это было Сверху. А затем, левый серый бар, я хочу его на вершине обоих из них (или все из них)

Пробный порядок элементов с z-index: 1, z-index: 2 и т. Д., Но не кажется работать.

+0

было бы намного проще, если бы вы могли поместить это в jsfiddle или plunkr. а для полей без полей, радиуса и пробела между divs вы можете сделать что-то вроде этого: * {margin: 0; заполнение: 0; границы радиуса: 0; } –

ответ

0

Как человек в ответ вы связаны до (https://stackoverflow.com/a/32485707/5260563) заявил, что вам нужно использовать

position: absolute; 

когда вы делаете элемент имеют z-index.

+0

О, хорошо, я не понял. Тем не менее, я просто изменил их и сделав, что мой фон (правый div) и мой нижний колонтитул (footer div) полностью исчезают. См. В окне в верхней правой части экрана: http://i.stack.imgur.com/ubNRl.png –

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