相对定位内部的绝对定位

Question

相对定位内部的绝对定位

4

我正在使用100%宽度相对定位，但需要一个绝对定位的子div或span来容纳jquery图像轮播。布局如下：图片1、轮播、图片2都在100%宽度内。目前，轮播span没有像其他对象一样被定位在同一行，并且重叠了。以下是我的成果： 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;
 }

- benc

你能否再详细解释一下你想要实现的目标？我不太明白什么是相对的，什么是绝对的，以及你希望所有内容放置在哪里。 - dezman

观看者跨度内容需要绝对定位，以便图像可以相互叠放，使jQuery过渡效果正常工作（我想是这样的！）pic_container类需要是相对定位，以允许在所有分辨率下实现100％的宽度。 - benc

3个回答

0

尝试给 pic_container 添加 position: relative;，并尝试给 viewer 添加 display: inline-block;，这可能会起作用。 pic_container 也可以添加 display: inline-block;。

- Bhojendra Rauniyar

0

以下更改将解决您的问题。

这是基于您的代码。您可以微调它使其更短。

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/

- Arbel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fletch · Accepted Answer

我已经为查看器添加了一个包装器，并使用html注释标记删除了外部图像和幻灯片查看器之间的额外间距（这比设置font-size: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/ 希望对您有所帮助。