我试图创建一个纯粹的CSS手风琴，并且几乎让它与单选按钮配合使用，我面临的问题是手风琴倾向于将内容移开视线。
有没有办法让按钮/标题保持在浏览器窗口的顶部？
可在此处找到页面http://jeyonline.com/lgc/#platform
（PS我知道这个页面还有很多其他问题，现在只修复化妆品。）
相关CSS
/* Accordion */
.ac-container h3 {
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
}
.ac-container h3:hover {
background: #00AFFC;
}
.ac-container input:checked + h3,
.ac-container input:checked + h3:hover {
}
.ac-container h3:hover:after,
.ac-container input:checked + h3:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + h3:hover:after {
background-image: url(../images/arrow_up.png);
}
.ac-container input {
display: none;
}
.ac-container .ac-one, .ac-container .ac-two, .ac-container .ac-three, .ac-container .ac-four {
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition: height 0.3s ease-in-out;
}
.ac-container input:checked ~ .ac-one, .ac-container input:checked ~ .ac-two, .ac-container input:checked ~ .ac-three, .ac-container input:checked ~ .ac-four {
transition: height 0.5s ease-in-out;
}
.ac-container input:checked ~ .ac-one {
height: 410px;
background: url('../images/logo_who.jpg') no-repeat;
padding: 20px 0;
}
.ac-one h4, .ac-two h4, .ac-three h4, .ac-four h4 {
padding-left: 60px;
}
.ac-one p, .ac-two p, .ac-three p, .ac-four p {
padding-left: 160px;
}
.ac-container input:checked ~ .ac-two {
height: 280px;
background: url('../images/logo_360view.jpg') no-repeat;
padding: 20px 0;
}
.ac-container input:checked ~ .ac-three {
height: 940px;
background: url('../images/logo_marketing.jpg') no-repeat;
padding: 20px 0;
}
.ac-container input:checked ~ .ac-four {
height: 400px;
background: url('../images/logo_payment.jpg') no-repeat;
padding: 20px 0;
}
.ac-five {
background: url('../images/logo_content.jpg') no-repeat;
padding: 20px 0;
}
.ac-six {
background: url('../images/logo_partners.jpg') no-repeat;
padding: 20px 0;
}
相关HTML
<article id="platform" class="ac-container">
<div class="container">
<div class="row titleset">
<div class="sixteen columns">
<h2 class="remove-bottom">The Platform</h2>
</div>
</div>
<div id="accordion">
<div class="row ">
<input id="ac-1" name="accordian-1" type="radio" checked />
<label for="ac-1">
<h3 class="sectionblock">Who Needs LGC?</h3>
</label>
<div class="ac-one">
<div class="one-full-column headset">
<p class="centeredp"><h4>Start-ups,</h4></p>
<p class="centeredp">looking for a complete turnkey solution.</p>
</div>
<div class="one-full-column headset">
<p class="centeredp"><h4>Corporate Start-Ups,</h4></p>
<p class="centeredp">You're already an established player, but you need to launch a new brand or enter a new territory quickly.</p>
</div>
<div class="one-full-column headset">
<p class="centeredp"><h4>Existing Operators,</h4></p>
<p class="centeredp">You might be an established player that needs to move to a powerful and cost-effective platform. Or you may need an efficient way to integrate content from all our content partners.</p>
</div>
</div><!-- ac-one -->
</div>
<div class="row ">
<input id="ac-2" name="accordian-1" type="radio" />
<label for="ac-2">
<h3 class="sectionblock">Player Management</h3>
</label>
<div class="ac-two">
<div class="one-full-column headset">
<p>360 degree view of the customer.</p>
<p class="alert">Support for x currencies and x languages.</p>
<p>Support for popular CMS system, Wordpress.</p>
<p>Out of the box solutions for all typical pages such as registration, deposits, account management.</p>
<p>Bespoke services available to customise these pages to suit your needs.</p>
<p class="alert">[insert reporting].</p>
</div>
</div><!-- ac-two -->
</div>
<div class="row ">
<input id="ac-3" name="accordian-1" type="radio" />
<label for="ac-3">
<h3 class="sectionblock">Marketing</h3>
</label>
<div class="ac-three">
<div class="one-full-column headset">
<p><h4>Market-leading bonus functionality:</h4></p>
<p>Deposit/sign-up</p>
<p>Free spins</p>
<p>Cash</p>
<p class="alert">Insert something about segmentation, ease-of-use</p>
</div>
<div class="one-full-column headset">
<p><h4>Loyalty system:</h4></p>
<p>Multi-tier loyalty system proven to increase customer retention and spend</p>
<p>Players progress through Bronze, Silver and Gold tiers accumulating points through their turnover or rake</p>
<p>Players increase the rate at which points accumulate as they progress through the tiers</p>
</div>
<div class="one-full-column headset">
<p><h4>CRM:</h4></p>
<p class="alert">Insert text</p>
</div>
<div class="one-full-column headset">
<p><h4>Affiliate System:</h4></p>
<p class="alert">Insert text</p>
</div>
<div class="one-full-column headset">
<p><h4>LGC's Best of Both World's Approach</h4></p>
<p>We've partnered with the industry's premier content providers to give you a complete product portfolio at the flick of a switch.</p>
<p>We run an open platform that also gives you room for bespoke content to suit your own market's needs.</p>
<p>300 + desktop games available now.</p>
<p>25 mobile games available now.</p>
<p><a href="#content">Click here to see more</a></p>
<p></p>
</div>
</div><!-- ac-three -->
</div>
<div class="row ">
<input id="ac-4" name="accordian-1" type="radio" />
<label for="ac-4">
<h3 class="sectionblock" for="ac-4">Payment Systems</h3>
</label>
<div class="ac-four">
<div class="one-full-column headset">
<p><h4>Out of the box support for:</h4></p>
<p class="image_gallery_pay">
<img src="./images/logo_visa.png" />
<img src="./images/logo_mastercard.png" />
<img src="./images/logo_neteller.png" />
<img src="./images/logo_paysafe.png" />
<img src="./images/logo_ukash.png" />
</p>
</div>
<div class="one-full-column headset">
<p><h4>Our payment managements system gives you:</h4></p>
<p>Real time reporting and fraud-management tools</p>
<p>Transaction routing to guarantee the lowest transaction fees</p>
<p>Make use of aggregated commercial arrangements to guarantee the lowest prices</p>
<p>Quick access to over 100 different payment methods</p>
</div>
</div><!-- ac-four -->
</div>
</div><!-- accordion -->
</div><!-- .container -->
</article>
<article id="content" class="">
<div class="container">
<div class="row titleset">
<div class="sixteen columns">
<h2 class="remove-bottom">Content</h2>
</div>
</div>
<div class="row ">
<div class="ac-five">
<div class="two-third-column headset">
<p>We've partnered with the industry's premier content providers to give you a complete product portfolio at the flick of a switch.</p>
<p>Excellent content is at the heart of our approach. The best-of-breed content from our partners below, coupled with LGC’s powerful marketing tools, ensures operators see maximum return on investment.</p>
<p>Additionally, we run an open platform that gives you room to integrate bespoke content to suit your own market's needs.</p>
<p>300 + desktop games available now</p>
<p>25 mobile games available now</p>
</div>
</div>
</div>
<div class="row ">
<div class="one-full-column headset">
<p><h4>Our Casino Partners</h4></p>
<p class="image_gallery">
<a href="http://www.leandergames.com" target="_blank"><img src="./images/logo_leander.png" height="80" width="120" /></a>
<a href="http://www.amayagaming.com" target="_blank"><img src="./images/logo_amaya.png" height="80" width="120" /></a>
<a href="http://www.rivalpowered.com" target="_blank"><img src="./images/logo_rival.png" height="80" width="120" /></a>
<a href="http://www.airdice.com" target="_blank"><img src="./images/logo_airdice.png" height="80" width="120" /></a>
<a href="http://www.ezugi.com" target="_blank"><img src="./images/logo_ezugi.png" height="80" width="120" /></a>
</p>
</div>
<div class="one-full-column headset">
<p><h4>Sportsbook</h4></p>
<p>We have partnered with two leading sportsbook providers:
<p class="image_gallery">
<img src="./images/logo_betconstruct.png" height="80" width="120" />
<img src="./images/logo_betinaction.png" height="80" width="120" />
</p>
</p>
</div>
<div class="two-third-column headset">
<p>You can choose to run a fully-managed book that uses the risk parameters you set, allowing you to offer a sportsbook without the need for expensive traders.</p>
<p>Desktop and mobile versions available.</p>
<p>Access to virtual sports products.</p>
</div>
</div><!-- .container -->
</article>