Абсолютное позиционирование внутри относительного

Question

Я работаю с относительным позиционированием по ширине 100%, но для размещения ползунка изображения jQuery требуется абсолютный позиционный дочерний div или span.

Макет

------ ширина 100% -------

| img1 | слайдер | img2 |

В настоящее время диапазон слайдер не позиционируется рядный, как и другие объекты и перекрытием

То, что я до сих пор:

Fiddle

HTML

<div class="pic_container"> 
    <img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg"> 
    <span class="viewer"> 
     <img src="http://images.printsplace.co.uk/Content/Images/Products/46576/43569/Image_of_M101_1.jpg" alt="" class="active" /> 
     <img src="http://i.bosity.com/clothes_cache/261/12002348/3480000011312473207_12002348_1_image.jpg" alt="" /> 
     <img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-6.jpg" alt="" /> 
    </span> 
    <img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg"> 
</div> 

</div> 

CSS

/*slideshow*/ 

.viewer { 
    font-size:0; 
    display:inline; 
} 

.viewer IMG { 
    position:absolute; 

    z-index:8; 
    width:50%; 
    vertical-align:top; 
} 

.viewer IMG.active { 
    z-index:10; 
} 

.viewer IMG.last-active { 
    z-index:9; 
} 


/*pics*/ 

.pic_container{ 
    font-size:0; 
    display:inline; 

    } 


.pic_container img { 

    width:25%; 
    vertical-align:top; 
} 

Answer 1

Я добавил оболочку к средству просмотра и удалил дополнительное расстояние между вашими внешними изображениями и средством просмотра слайд-шоу, используя теги комментариев html (это лучше, чем установка размера шрифта: 0). Я скорректировал JS, так что переход работает. Я также очистил и уменьшил количество необходимых CSS.

HTML

<div class="picture-container"> 
    <img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg" /><!-- 
     --><div class="viewer"> 
     <img src="http://images.printsplace.co.uk/Content/Images/Products/46576/43569/Image_of_M101_1.jpg" class="active" /> 
     <img src="http://i.bosity.com/clothes_cache/261/12002348/3480000011312473207_12002348_1_image.jpg" /> 
     <img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-6.jpg" /> 
     </div><!-- 
    --><img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg" /> 
</div> 

CSS:

* {margin:0;padding:0} 
.picture-container > img {display:inline-block;width:25%;} 
.viewer {display:inline-block;position:relative;width:50%;vertical-align:top;} 
.viewer img {position:absolute;width:100%;} 

JS

function slideSwitch() { 
    var transitionDuration = 1000; 
    var active = $('.viewer img.active'); 
    var next = $('.viewer img:first').insertAfter(active); 
    active.removeClass('active').fadeOut(transitionDuration); 
    next.addClass('active').hide().fadeIn(transitionDuration); 
} 
$(document).ready(function(){ 
    $('.viewer img.active').insertAfter('.viewer img:last'); 
    setInterval("slideSwitch()", 4000); 
}); 

Вы можете увидеть здесь: http://jsfiddle.net/Ry7Su/1/

Надеюсь, что это поможет.

Answer 2

Следующие изменения изменят вашу проблему.

Это основано на вашем коде. Вы можете настроить его, чтобы сделать его короче.

HTML часть:

<div class="pic_container"> 
    <div class="leftDiv"> 
     <img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg"> 
    </div><!-- 
    --><div class="viewerWrapper"><div class="viewer"> 
     <img src="http://images.printsplace.co.uk/Content/Images/Products/46576/43569/Image_of_M101_1.jpg" alt="" class="active" /> 
     <img src="http://i.bosity.com/clothes_cache/261/12002348/3480000011312473207_12002348_1_image.jpg" alt="" /> 
     <img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-6.jpg" alt="" /> 
    </div></div><!-- 
    --><div class="rightDiv"> 
     <img src="http://www.image-and-text.com/pictures/whiskey_with_ice.jpg"> 
    </div> 
</div> 

CSS Часть:

.pic_container { 
    display: block; 
    width: 100%; 
    position:relative; 
    } 
.leftDiv { 
    display:inline-block; 
    width: 25%; 
    position:relative; 
} 
.rightDiv { 
    display:inline-block; 
    width: 25%; 
    position:relative; 
} 
.viewerWrapper { 
    display:inline-block; 
    width: 50%; 
    position:relative; 
    vertical-align: top; 
} 
.viewer { 
    width:100%; 
} 
.leftDiv IMG, .rightDiv IMG, .viewer IMG { 
    max-width: 100%; 
} 
.viewer IMG { 
    z-index:8; 
    position: absolute; 
} 
.viewer IMG.active { 
    z-index:10; 
} 
.viewer IMG.last-active { 
    z-index:9; 
} 

 

Посмотри здесь: http://jsfiddle.net/FTEan/

 

Answer 3

попытайтесь дать pic_containerposition: relative; и попытайтесь дать viewerdisplay: inline-block; это может сработать.pic_container может также быть display: inline-block;