我在手风琴上工作以展示旧的博客文章。如果你使用一个标签，下面的部分会下降或跳转，但我希望标签位于下面的行。 我尝试了一些解决方案来处理z-index和固定位置，但没有任何方法可行。 这是我的代码片段：
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
.accordion-section-content {
background-color: #faf5f2;
}
.termin-header {
position: absolute;
left: 15px;
right: 15px;
bottom: 45px;
text-align: center;
background: rgba(99,98,96,0.7);
}
.termin-header > h2 {
color: white;
}
#firstimage{
position:relative;
background: no-repeat 50% / 100%;
border-bottom: 2px solid #000;
}
.firstimage > img{
vertical-align: top;
width: 100%; /* max width */
opacity: 0; /* make it transparent */
}
.firstimage > div{
position: absolute;
top: 0;
width:100%;
height:100%;
}
.firstimage p{
padding:30px;
}
.aktuelles-title {
color: white;
font-size: 30px;
font-family: 'AracneCondensedRegular';
text-align: center;
margin: 0px;
height: 100px;
}
.aktuelles-wrapper {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-122" class="post-122 post type-post status-publish format-image has-post-thumbnail hentry category-aktuelles post_format-post-format-image">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/Unbenannt-1_08.gif');">
<div>
<a class="accordion-section-title" href="#accordion-122"><h2 class="aktuelles-title entry-title ">And the Winner is….</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-122" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Hier ist das Gewinneroutfit von Stil-Frage Teil 3. Felix hat sich für Outfit Nr. 3 entschieden! Wir freuen uns mit YVONNE MARCATH. Sie ist die Gewinnerin des 50€ Einkaufsgutscheins.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-93" class="post-93 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/09/outfit.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-93"><h2 class="aktuelles-title entry-title ">Ein Typ….Drei Outfits.</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-93" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p><strong>Für welches Outfit entscheidet sich Felix aus Ramsdorf?</strong></p>
<p>Felix war einverstanden bei uns drei verschiedene Outfits anzuprobieren. Am Ende kann er sich aber nur für eins entscheiden – welches wird das sein? Jetzt auf der Facebook – Seite vom Modehaus Cohausz abstimmen und mit etwas Glück einen Modegutschein gewinnen. Das Video vom Casting findet Ihr <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">hier</a> und auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borio.tv/aktuelles/borken/stilfrage-folge-3----welches-outfit-waehlt-felix_29801" target="_blank">BorioTv.</a></p>
<div class="align-center">
<p>Die Auflösung gibt es am kommenden Mittwoch.</p>
</div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/08/verkaufsoffen.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-1"><h2 class="aktuelles-title entry-title ">Borken lädt ein…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-1" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>zum 07. Borkener Ostermarkt am Sonntag, den 22. März 2015 ab 11.00 Uhr. Die Geschäfte in der Innenstadt sind von 13.00 Uhr bis 18.00 Uhr geöffnet.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-329" class="post-329 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/catwalk.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-329"><h2 class="aktuelles-title entry-title ">Vielen Dank für Ihr Interesse an unserer Fashion Show…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-329" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Wir bedanken uns bei unseren kleinen und großen Modells und dem zahlreich erschienenen Publikum für den gelungenen stimmungsvollen Abend.<br>
Weitere Bilder der Show auf <a class="external-link-new-window" title="Opens external link in new window" href="http://www.borken-live.de/" target="_blank">Borken-Live.de</a></p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-332" class="post-332 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-332"><h2 class="aktuelles-title entry-title ">Modegutschein zu gewinnen…</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-332" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<p>Genießen Sie einen modischen Vorgeschmack auf das Frühjahr bei unserer Modenschau am 19. März 2015. Wir laden Sie, gern auch Ihre Freundin, auf ein Gläschen Prosecco ein. Mit ein wenig Glück haben Sie die Möglichkeit einen Modegutschein zu gewinnen.</p>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
<!-- Toggle #1 -->
<!-- Toggle Link -->
<!-- Toggle Content to display -->
<div class="accordion-section">
<div class="col-sm-4 aktuelles-wrapper">
<article id="post-335" class="post-335 post type-post status-publish format-standard has-post-thumbnail hentry category-aktuelles">
<header class="entry-header aktuelles-header" style="background-image: url('http://www.tradingup-test.de/cohausz/wp-content/uploads/2015/10/einladung2.jpg');">
<div>
<a class="accordion-section-title" href="#accordion-335"><h2 class="aktuelles-title entry-title ">Noch auf der Suche nach dem perfekten Frühjahrslook?</h2></a>
</div>
</header><!-- .entry-header -->
<div id="accordion-335" class="accordion-section-content">
<!-- .toggle-content (end) -->
<div class="aktuelles-content">
<div class="news-list-item">
<p>Welche Farben sind in dieser Saison angesagt? Wie kombiniert man die neusten Trends?</p>
<div class="align-center">
<p>Wir zeigen Ihnen den Frühling auf unserer exclusiven Fashionshow</p>
<p>am Donnerstag, dem 12. März 2015 um 19.03 Uhr.</p>
<p>Wir bitten um Anmeldung unter 02861/92190 oder</p>
<p>info@mode-cohausz.de</p>
</div>
</div>
<div class="news-list-item"></div>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
</div></div>
</div>
答案 0 :(得分：0)
我刚才做了类似的事情。 我知道z-index在玩了一段时间之后为我做了这件事。 在将它放在正确位置然后在jquery中切换之后，你还可以将文章隐藏在你的CSS中。
编辑：
$(document).ready(function(){
$("image").click(function(){
$("#articleText").toggle();
});
});#image{
background-color: green;
width: 80px;
height: 80px;
}
#articleText{
visibility: ;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="image">this represents a image</div><!-- image or somthing else, you have images what show a artivle on click -->
<div id="articleText">
This is a article
</div> <!-- your article -->
</body>
</html>
像这样的东西应该有用，我跟z-index不一样。 我在google上发现了一个可能对你有帮助的链接，我会关注这个位置绝对的部分： https://css-tricks.com/almanac/properties/z/z-index/