0
希望第二组眼睛会有所帮助。我在两个不同的模块上使用相同的代码，但最新的代码没有做我需要的。CSS分层z索引问题
我有一个内容为50/50内容的模块。一方有一个图像+标题。图像应该在标题下。我这样做是用z-index在不同的模块，但是，这一个不工作时，图像消失
#wrapper {width: 100%;}
.mod-sub-links {
margin: 1rem 0;
overflow: hidden;
}
.mod-sub-links-img,
.mod-sub-links-copy {
float: left;
width: 50%;
}
.mod-sub-links-img {
position: relative;
text-transform: uppercase;
}
.mod-sub-links-img img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.mod-sub-links-img h2 {
color: #fefefe;
margin: 20px 0 0 20px;
}
.mod-sub-links-copy {
padding: 20px;
color: #fefefe;
background: #3d61a4;
}
.mod-sub-links-copy a > i.fa {
color: #3d61a4;
background-color: #fefefe;
padding: 8px 0 0;
text-align: center;
border-radius: 50%;
margin: 0 auto;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
}<div id="wrapper">
<div class="mod-sub-links clearfix">
<div class="mod-sub-links-img float-left">
<h2>Engineering</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-sub-links-copy float-left">
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Main Precision Statement</p>
<p>Brief text about site section expanded within the landing page.</p>
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Main Precision Statement</p>
<p>Brief text about site section expanded within the landing page.</p>
<a href="#"><i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>工作代码
!function(i,t){var n,e="superslides";n=function(n,e){this.options=t.extend({play:!1,animation_speed:600,animation_easing:"swing",animation:"slide",inherit_width_from:i,inherit_height_from:i,pagination:!0,hashchange:!1,scrollable:!0,elements:{preserve:".preserve",nav:".slides-navigation",container:".slides-container",pagination:".slides-pagination"}},e);var s=this,o=t("<div>",{class:"slides-control"}),a=1;this.$el=t(n),this.$container=this.$el.find(this.options.elements.container);var r=function(){return a=s._findMultiplier(),s.$el.on("click",s.options.elements.nav+" a",function(i){i.preventDefault(),s.stop(),t(this).hasClass("next")?s.animate("next",function(){s.start()}):s.animate("prev",function(){s.start()})}),t(document).on("keyup",function(i){37===i.keyCode&&s.animate("prev"),39===i.keyCode&&s.animate("next")}),t(i).on("resize",function(){setTimeout(function(){var i=s.$container.children();s.width=s._findWidth(),s.height=s._findHeight(),i.css({width:s.width,left:s.width}),s.css.containers(),s.css.images()},10)}),t(i).on("hashchange",function(){var i,t=s._parseHash();i=t&&!isNaN(t)?s._upcomingSlide(t-1):s._upcomingSlide(t),i>=0&&i!==s.current&&s.animate(i)}),s.pagination._events(),s.start(),s},c={containers:function(){s.init?(s.$el.css({height:s.height}),s.$control.css({width:s.width*a,left:-s.width}),s.$container.css({})):(t("body").css({margin:0}),s.$el.css({position:"relative",overflow:"hidden",width:"100%",height:s.height}),s.$control.css({position:"relative",transform:"translate3d(0)",height:"100%",width:s.width*a,left:-s.width}),s.$container.css({display:"none",margin:"0",padding:"0",listStyle:"none",position:"relative",height:"100%"})),1===s.size()&&s.$el.find(s.options.elements.nav).hide()},images:function(){var i=s.$container.find("img").not(s.options.elements.preserve);i.removeAttr("width").removeAttr("height").css({"-webkit-backface-visibility":"hidden","-ms-interpolation-mode":"bicubic",position:"absolute",left:"0",top:"0","z-index":"-1","max-width":"none"}),i.each(function(){var i=s.image._aspectRatio(this),n=this;if(t.data(this,"processed"))s.image._scale(n,i),s.image._center(n,i);else{var e=new Image;e.onload=function(){s.image._scale(n,i),s.image._center(n,i),t.data(n,"processed",!0)},e.src=this.src}})},children:function(){var i=s.$container.children();i.is("img")&&(i.each(function(){if(t(this).is("img")){t(this).wrap("<div>");var i=t(this).attr("id");t(this).removeAttr("id"),t(this).parent().attr("id",i)}}),i=s.$container.children()),s.init||i.css({display:"none",left:2*s.width}),i.css({position:"absolute",overflow:"hidden",height:"100%",width:s.width,top:0,zIndex:0})}},h={slide:function(i,t){var n=s.$container.children(),e=n.eq(i.upcoming_slide);e.css({left:i.upcoming_position,display:"block"}),s.$control.animate({left:i.offset},s.options.animation_speed,s.options.animation_easing,function(){s.size()>1&&(s.$control.css({left:-s.width}),n.eq(i.upcoming_slide).css({left:s.width,zIndex:2}),i.outgoing_slide>=0&&n.eq(i.outgoing_slide).css({left:s.width,display:"none",zIndex:0})),t()})},fade:function(i,t){var n=this,e=n.$container.children(),s=e.eq(i.outgoing_slide),o=e.eq(i.upcoming_slide);o.css({left:this.width,opacity:1,display:"block"}),i.outgoing_slide>=0?s.animate({opacity:0},n.options.animation_speed,n.options.animation_easing,function(){n.size()>1&&(e.eq(i.upcoming_slide).css({zIndex:2}),i.outgoing_slide>=0&&e.eq(i.outgoing_slide).css({opacity:1,display:"none",zIndex:0})),t()}):(o.css({zIndex:2}),t())}};h=t.extend(h,t.fn.superslides.fx);var d={_centerY:function(i){var n=t(i);n.css({top:(s.height-n.height())/2})},_centerX:function(i){var n=t(i);n.css({left:(s.width-n.width())/2})},_center:function(i){s.image._centerX(i),s.image._centerY(i)},_aspectRatio:function(i){if(!i.naturalHeight&&!i.naturalWidth){var t=new Image;t.src=i.src,i.naturalHeight=t.height,i.naturalWidth=t.width}return i.naturalHeight/i.naturalWidth},_scale:function(i,n){n=n||s.image._aspectRatio(i);var e=s.height/s.width,o=t(i);e>n?o.css({height:s.height,width:s.height/n}):o.css({height:s.width*n,width:s.width})}},l={_setCurrent:function(i){if(s.$pagination){var t=s.$pagination.children();t.removeClass("current"),t.eq(i).addClass("current")}},_addItem:function(i){var n=i+1,e=n,o=s.$container.children().eq(i),a=o.attr("id");a&&(e=a);var r=t("<a>",{href:"#"+e,text:e});r.appendTo(s.$pagination)},_setup:function(){if(s.options.pagination&&1!==s.size()){var i=t("<nav>",{class:s.options.elements.pagination.replace(/^\./,"")});s.$pagination=i.appendTo(s.$el);for(var n=0;s.size()>n;n++)s.pagination._addItem(n)}},_events:function(){s.$el.on("click",s.options.elements.pagination+" a",function(i){i.preventDefault();var t=s._parseHash(this.hash),n=s._upcomingSlide(t-1);n!==s.current&&s.animate(n,function(){s.start()})})}};return this.css=c,this.image=d,this.pagination=l,this.fx=h,this.animation=this.fx[this.options.animation],this.$control=this.$container.wrap(o).parent(".slides-control"),s._findPositions(),s.width=s._findWidth(),s.height=s._findHeight(),this.css.children(),this.css.containers(),this.css.images(),this.pagination._setup(),r()},n.prototype={_findWidth:function(){return t(this.options.inherit_width_from).width()},_findHeight:function(){return t(this.options.inherit_height_from).height()},_findMultiplier:function(){return 1===this.size()?1:3},_upcomingSlide:function(i){if(/next/.test(i))return this._nextInDom();if(/prev/.test(i))return this._prevInDom();if(/\d/.test(i))return+i;if(i&&/\w/.test(i)){var t=this._findSlideById(i);return t>=0?t:0}return 0},_findSlideById:function(i){return this.$container.find("#"+i).index()},_findPositions:function(i,t){t=t||this,void 0===i&&(i=-1),t.current=i,t.next=t._nextInDom(),t.prev=t._prevInDom()},_nextInDom:function(){var i=this.current+1;return i===this.size()&&(i=0),i},_prevInDom:function(){var i=this.current-1;return 0>i&&(i=this.size()-1),i},_parseHash:function(t){return t=t||i.location.hash,t=t.replace(/^#/,""),t&&!isNaN(+t)&&(t=+t),t},size:function(){return this.$container.children().length},destroy:function(){return this.$el.removeData()},update:function(){this.css.children(),this.css.containers(),this.css.images(),this.pagination._addItem(this.size()),this._findPositions(this.current),this.$el.trigger("updated.slides")},stop:function(){clearInterval(this.play_id),delete this.play_id,this.$el.trigger("stopped.slides")},start:function(){var n=this;n.options.hashchange?t(i).trigger("hashchange"):this.animate(),this.options.play&&(this.play_id&&this.stop(),this.play_id=setInterval(function(){n.animate()},this.options.play)),this.$el.trigger("started.slides")},animate:function(t,n){var e=this,s={};if(!(this.animating||(this.animating=!0,void 0===t&&(t="next"),s.upcoming_slide=this._upcomingSlide(t),s.upcoming_slide>=this.size()))){if(s.outgoing_slide=this.current,s.upcoming_position=2*this.width,s.offset=-s.upcoming_position,("prev"===t||s.outgoing_slide>t)&&(s.upcoming_position=0,s.offset=0),e.size()>1&&e.pagination._setCurrent(s.upcoming_slide),e.options.hashchange){var o=s.upcoming_slide+1,a=e.$container.children(":eq("+s.upcoming_slide+")").attr("id");i.location.hash=a?a:o}e.$el.trigger("animating.slides",[s]),e.animation(s,function(){e._findPositions(s.upcoming_slide,e),"function"==typeof n&&n(),e.animating=!1,e.$el.trigger("animated.slides"),e.init||(e.$el.trigger("init.slides"),e.init=!0,e.$container.fadeIn("fast"))})}}},t.fn[e]=function(i,s){var o=[];return this.each(function(){var a,r,c;return a=t(this),r=a.data(e),c="object"==typeof i&&i,r||(o=a.data(e,r=new n(this,c))),"string"==typeof i&&(o=r[i],"function"==typeof o)?o=o.call(r,s):void 0}),o},t.fn[e].fx={}}(this,jQuery),$(document).foundation(),$(function(){"use strict";$.hamburger=$("#nav-toggle"),$.nav=$(".primary-nav"),$.hamburger.click(function(i){$(this).toggleClass("active"),i.preventDefault(),$.nav.slideToggle(500)}),$("#slides").superslides({play:5e3,animation:"fade",pagination:!1}),$("#slides-int").superslides(),$('a[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")===this.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var i=$(this.hash);if(i=i.length?i:$("[name="+this.hash.slice(1)+"]"),i.length)return $("html, body").animate({scrollTop:i.offset().top},1e3),!1}}),$(".mod-accordion-bottom").click(function(){var i=$(this).closest(".mod-accordion-wrap").toggleClass("active"),t=i.hasClass("active");if(i.find(".mod-accordion-bottom i").toggleClass("fa-minus",t).toggleClass("fa-plus",!t),i.find(".mod-accordion-content")[t?"slideDown":"slideUp"]("normal"),t){var n=$(".mod-accordion-wrap.active").not(i).removeClass("active");n.find(".mod-accordion-content").slideUp(),n.find(".mod-accordion-bottom i").removeClass("fa-minus").addClass("fa-plus")}}),$(".toggle-wrap").click(function(){$(".toggle-content").toggleClass("open"),$(this).find(".filters").slideToggle(100)})});.mod-accordion-wrap {
margin-bottom: 0.625rem; }
.mod-accordion-wrap.active .mod-accordion-top {
background-color: #3d61a4; }
.mod-accordion-wrap.active .mod-accordion-top-title-icon i.fa {
color: #ffee00; }
.mod-accordion-top {
overflow: hidden;
border-radius: 8px 8px 0 0;
background: #282c2f; }
.mod-accordion-top-title, .mod-accordion-top-image {
width: 50%;
float: left;
max-height: 10.3125rem; }
.mod-accordion-top-image {
position: relative; }
.mod-accordion-top-image img {
margin-top: -7%; }
.mod-accordion-top-image.investors img {
margin-top: -40%; }
.mod-accordion-top-title {
text-transform: uppercase; }
.mod-accordion-top-title-copy, .mod-accordion-top-title-icon {
width: 100%;
float: left; }
@media screen and (min-width: 40em) {
.mod-accordion-top-title-copy, .mod-accordion-top-title-icon {
width: 48%; } }
.mod-accordion-top-title-copy {
margin: 20px 0 0 20px;
padding: 0 155px 0 0; }
@media screen and (min-width: 40em) {
.mod-accordion-top-title-copy {
border-right: 2px solid #fefefe;
min-height: 113px; } }
.mod-accordion-top-title-icon {
text-align: center; }
.mod-accordion-top-title-icon i.fa {
margin-top: 50px; }
.mod-accordion-top-title-icon i.fa.active {
color: #ffee00; }
.mod-accordion-content {
display: none;
overflow: hidden;
margin: 0.625rem 0; }
.mod-accordion-content-wrap {
overflow: hidden;
margin-bottom: 0.625rem; }
.mod-accordion-content-wrap:last-of-type {
margin-bottom: 0; }
.mod-accordion-content-title, .mod-accordion-content-copy {
width: 100%; }
@media screen and (min-width: 40em) {
.mod-accordion-content-title, .mod-accordion-content-copy {
width: 50%;
float: left; } }
.mod-accordion-content-copy {
padding: 25px 35px 25px 25px;
background-color: #3d61a4;
text-align: center;
min-height: 21.875rem; }
.mod-accordion-content-copy h4, .mod-accordion-content-copy p {
text-align: left; }
.mod-accordion-content-copy a {
color: #3d61a4;
background-color: #fefefe;
padding: 3px 0 0;
text-align: center;
border-radius: 50%;
margin: 40px auto 0;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.mod-accordion-content-copy a:hover {
background-color: #faa74a;
color: #fefefe; }
.mod-accordion-content-title {
position: relative;
text-transform: uppercase; }
.mod-accordion-content-title h2 {
padding: 20px; }
@media screen and (min-width: 40em) {
.mod-accordion-content-title h2 {
margin: 20px;
padding: 0; } }
.mod-accordion-content-title img {
position: absolute;
left: 0;
top: 0;
z-index: -1; }
.mod-accordion-bottom {
background-color: #b4b6b7;
border-radius: 0 0 8px 8px;
padding: 10px 0;
text-align: center; }
.mod-accordion-bottom.active, .mod-accordion-bottom:hover {
cursor: pointer;
background-color: #3d61a4; }
.mod-accordion-bottom i.fa {
color: #3d61a4;
background-color: #fefefe;
padding: 8px 0 0;
text-align: center;
border-radius: 50%;
margin: 0 auto;
display: block;
width: 32px;
height: 32px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer; }
.mod-accordion-bottom i.fa.fa-minus {
color: #faa74a; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/d7ed46e5fb.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<div class="mod-accordion-wrap">
<div class="mod-accordion-top">
<div class="mod-accordion-top-title">
<div class="mod-accordion-top-title-copy">
<h4>Our Story</h4>
</div>
<div class="mod-accordion-top-title-icon show-for-medium">
<i class="fa fa-book fa-3x"></i>
</div>
</div>
<div class="mod-accordion-top-image">
<img src="//placehold.it/800x600" alt="">
</div>
</div><!-- END Top -->
<div class="mod-accordion-content">
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Precision</h2>
<img src="images/HS6C4209.jpg" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Precision Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="mod-accordion-content-wrap">
<div class="mod-accordion-content-title">
<h2>Engineering</h2>
<img src="//placehold.it/800x600" alt="">
</div>
<div class="mod-accordion-content-copy">
<h4>Main Engineering Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<h4>Second Engineering Statement</h4>
<p>Brief text about site section expanded within the landing page. Brief text about site section expanded within the landing page.</p>
<a href=""><i class="fa fa-arrow-right"></i></a>
</div>
</div>
'z-index：-1;'将一个元素*移动到它的容器后面。所以如果容器没有至少稍微透明的背景，它就会“消失”。 – connexo
但是在图像容器（或整个包装器）上没有背景。这让我感到困惑。它在另一个模块中工作，没有问题。几乎相同的代码。 –
即使在这里运行代码，它看起来正在工作......也许我在旋转我的轮子... –