2013-08-13 32 views
1

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

HTML

<div id="site-container"> 
    <div id="header-container"> 
    <div id="logo"></div> 
    </div> 

    <div id="slide"></div> 
    </div> 

CSS

#logo { 
    background:url(img/logo.png) no-repeat left top; 
    width:259px; 
    height:147px; 
    float:left; 
} 

#slide { 
    background:url(img/slide.png) no-repeat left top; 
    width:776px; 
    height:437px; 
    float:left; 
} 

я пытался использовать г позицию, но оказывается, что-то я не хочу, чтобы это. любой, почему логотип div должен быть верхним, не перемещая его правильное положение?

спасибо

+0

возможно дубликат [Как наложить один Див над другой div] (http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) – Typo

ответ

4

Если вы хотите над верхней частью DIV, вы должны использовать z-index. Вы должны преобразовать #logo и #slide, чтобы иметь атрибут position, и z-index следует применять к div, положение которого вы хотите перемещать вверх или вниз.

2

Скорректированный КСС,

#logo { 
    background:url(img/logo.png) no-repeat left top; 
    width:259px; 
    height:147px; 
    float:left; 
    position:absolute; 
    z-index:1000; 
} 

#slide { 
    background:url(img/slide.png) no-repeat left top; 
    width:776px; 
    height:437px; 
    float:left; 
    position:relative; 
    z-index:500; 
} 

Положение слайдов DIV установлен как относительное и логотип DIV устанавливается как абсолютные. Таким образом, логотип помещается внутри слайда.

Значение атрибута z-index определяет, какой из них находится.

+0

z-index должен быть целым числом, а не пиксели – RevNoah

1

Вам не хватает всего нескольких вещей, чтобы сделать это.

z-index расскажет вам, что происходит сверху.

положение должно быть абсолютным

И вы можете, что играть с полями ...

1

я использовал эти:

#logo { 
    background:url(img/logo.png) no-repeat left top; 
    width:259px; 
    height:147px; 
    float:left; 
    position:absolute; 
    z-index:1; 
} 

#slide { 
    background:url(img/slide.png) no-repeat left top; 
    width:776px; 
    height:437px; 
    float:left; 
    position:relative; 
} 

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

+0

Вместо предоставления обновлений ua как ответ .. U может jus обновить ваш вопрос ..Я сделал это на этот раз .. :) –

2

Попробуйте следующее: CSS

#Behind{ 
    width:100%; 
    background-color:orange; 
    position: absolute; 
    z-index: -1; 
    padding:50px; 
    } 
    #TopOne{ 
    position: absolute; 
    top:70px; 
    left:50px; 
    background-color:wheat; 
    padding:20px; 
    } 

и СТП просто

<div id="Behind"></div> 
    <div id="TopOne">This is Just Testing :)</div> 

Это ссылка JSFiddle также JSFiddle

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