2013-11-17 4 views
1

Я пытался поместить изображение над DIV, мой DIV являетсяРазмещение изображения через DIV

.my_box{ 
position: relative; 
left: 200px; 
width: 200px; 
height: 200px; 
background-color: white; 
opacity: 0.7; 
} 

, а затем мой образ

.asvp{ 
position:relative; 
left: 300px; 
top: 100px; 

} 

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

ответ

1

Попробуйте добавить z-index:1 на .my_box и z-index: 10 на .asvp. Трудно привязать без HTML-кода. Если это не сработает, создайте jsFiddle, и я разобраю вас. :)

Вы также должны использовать поля вместо left и top. Например, на .asvp удалите левый и верхний и положите margin: 100px 0 0 300px;. Как правило, я использую только абсолютные элементы слева, справа, сверху, снизу.

+0

Спасибо за вас ответить, пожалуйста, вы можете объясните мне, что делает z-index? Кроме того, он не работает:/ – AdzT1

+0

На самом деле его работала !! Спасибо, что ответили, это очень ценится! :) Не могли бы вы объяснить, что делает z-index? Как я хочу учиться на этом! – AdzT1

+1

Нет проблем! Рад, что смог помочь. Я ужасен в объяснении вещей, но по существу, он позволяет вам переупорядочить/установить порядок позиционированных элементов HTML. Вот хорошее объяснение: http://en.wikipedia.org/wiki/Z_index –

-1

Почему бы вам не указать свое положение изображения: абсолютное; вместо этого ... это автоматически помещало бы его в ontop

+0

Вам все равно нужно «z-index» DIVs или изменить порядок HTML. Но мы не знаем, в каком порядке. Но да, он должен использовать абсолютную позицию. Затем 'top: 0;' и 'left: 0;' и т. Д. - с 'z-index. –

-1

Вместо того, чтобы перемещаться, вы можете сохранить изображение внутри div без его непрозрачности, создавая его содержимое. Если это твердый полупрозрачный фон, как в вашем примере, вы можете использовать значение RGBA на DIV, как это:

background-color: rgba(255,255,255,0.7); 

Это и другие варианты здесь: https://stackoverflow.com/a/6780462/2909501

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