Div друг на друга

У меня есть 2 divs видео и изображения, и я хочу выборочно показывать/отображать с помощью JQuery , но на самом деле не скрывать его с .hide или .show(), пожалуйста, игнорируйте код shopify.Div друг на друга

Когда пользователь нажимает на миниатюры ниже, как мне их складывать друг на друга с помощью JQuery/CSS, но не используя методили .show?

<div id="mainVideoContainer"> 
    <video id="mainVideo" width="320" height="240" autoplay controls> 
     <source src="http:video.mp4" type="video/mp4">  
    </video> 
</div> 
<div class="mainImageContainer"> 
    <a href=""><img src="imageurl"/></a> 
</div>

источник

2013-12-04 user1688346

Попробуйте уточнить ваш вопрос с некоторыми скриншотами ... почему бы не использовать hide/show? – DaniP

Используя CSS, вы можете позиционировать оба div друг на друга.

Во-первых, обернуть дивы с оберткой, чтобы служить в качестве точки отсчета:

<div class="wrapper"> 
    <div id="mainVideoContainer" class="layer"> 
    <video id="mainVideo" width="320" height="240" autoplay controls> 
     <source src="http:video.mp4" type="video/mp4">  
    </video> 
    </div> 
    <div class="mainImageContainer layer"> 
    <a href=""><img src="imageurl"/></a> 
    </div> 
</div>

Затем, положение обоих DIVS на верхней части друг друга:

.wrapper { 
position:relative; // point of reference 
} 

.layer { 
position:absolute; 
top:0; 
left:0; 
}

Что касается определения, который является видна, вы можете использовать либо z-index, либо display

Проверьте this fiddle. измените значение z-index и посмотрите, как отображается тот, у которого более высокое значение.

источник

2013-12-04 20:51:39 Matanya

Свойство css z-index можно использовать. Элемент с наивысшим индексом будет находиться на верхнем уровне стека. Я могу использовать jQuery для изменения z-индекса, когда пользователь нажимает кнопку.

<html> 
    <head><title>Z-Index</title> 
    <style> 
    img 
    { 
    position:absolute; 
    left:0px; 
    top:0px; 
    z-index:-1; 
} 
</style> 
</head> 

    <body> 
<h1>This is a heading</h1> 
<img src="w3css.gif" width="100" height="140" /> 
<p>Because the image has a z-index of -1, it will be placed behind the text.</p> 
</body> 
</html>

Вы могли бы найти этот учебник полезным в получении знакомы с г-indez Css собственности http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

источник

2013-12-04 20:54:21

Вам нужно что-то вроде этого, который переключает Z-индекс по щелчку:

$('.tab').click(function(e){ 
    $('.tab').css('z-index', 1) 
    $(this).css('z-index', 10);  
});

И не забудьте установить в css .tab {position: relative}, Для получения дополнительной информации ознакомьтесь с этим JSFiddle: http://jsfiddle.net/dP4NX/1/

источник

2013-12-04 21:01:03

Div друг на друга

ответ

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