我的固定元素不在块容器中。为什么选项不像positon：亲戚在父母和位置：ablsoule in clild？怎么做？我做错了什么？ 谢谢！谢谢！谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.cont {
width: 1192px;
}
.container {
width: 1300px;
}
#scrollup {
position: fixed;
opacity: 0.8;
padding: 15px 10px 10px;
background: #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px;
bottom: 10px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias vero numquam, tenetur cum excepturi optio, ipsum error amet facilis ad beatae eveniet eum inventore iusto delectus. Perspiciatis recusandae, inventore dignissimos necessitatibus reiciendis sint culpa est reprehenderit dolore saepe? Amet quisquam necessitatibus minima obcaecati corporis quidem voluptates ducimus consequatur, incidunt recusandae quae autem rerum adipisci deserunt porro, eveniet impedit earum ad deleniti reiciendis et illum? Cumque temporibus minima quaerat molestias, voluptas tempora inventore mollitia voluptatem quae rerum exercitationem hic veniam expedita, officia maiores at non odio eaque, iste facilis illo fugit cum? Optio temporibus atque facilis fugiat nemo, blanditiis, magnam deserunt praesentium autem incidunt totam aliquid natus quisquam ut iure veniam neque molestias saepe voluptates, expedita debitis nesciunt recusandae. Inventore iure consequuntur eum sit ipsam molestias ratione a harum quidem adipisci saepe aspernatur nostrum praesentium debitis unde ullam autem eos eligendi possimus voluptatum expedita amet fuga minus, nulla. Ipsam laborum itaque alias placeat iure, dolore eveniet quasi temporibus reprehenderit reiciendis necessitatibus asperiores vel fugit magni ipsum natus. Temporibus quos iste, reprehenderit assumenda officia id nobis rem? Ducimus delectus ipsum, quos placeat sint, error laudantium vero. Minus, officia, numquam? Deleniti accusamus accusantium eum similique eligendi doloremque rerum autem cum optio nostrum architecto, iusto tenetur inventore incidunt doloribus. Sapiente veniam ullam eaque quasi non neque tenetur, suscipit itaque cum reiciendis laudantium omnis ut consectetur commodi vitae nobis libero maxime ipsum sint magnam hic voluptates aliquid alias. Sed laboriosam illo dolorem voluptates libero, odio architecto doloremque qui accusantium in sapiente minus, id quos, ab eum nesciunt, quam nihil! Possimus quidem eum excepturi laboriosam! Vero dicta architecto velit tempore, unde adipisci, magni quod alias veniam omnis eum maiores autem qui natus dignissimos! Numquam, consequuntur, quisquam. Unde perferendis ullam magni maxime ipsa inventore, neque debitis, laudantium assumenda ex possimus deleniti voluptatibus rem quod odit molestias nulla voluptates placeat quae quis mollitia, ipsam tempora. Voluptates cupiditate ducimus perspiciatis suscipit, inventore, facere totam. Maxime, fugiat aperiam laboriosam facere dolor excepturi saepe perspiciatis quam earum eius a amet iure atque similique veniam quidem cum culpa facilis hic minus sit, incidunt voluptates eligendi dolores. Sequi optio adipisci consectetur amet, tempora voluptate, repudiandae earum pariatur ratione nostrum illo quas sit, quis. Obcaecati provident dolorum porro cum incidunt. Possimus praesentium nihil libero ullam nobis accusantium voluptatum nesciunt iure esse rem recusandae officia nisi, ipsa tenetur error iste sapiente soluta sequi modi, quia animi cum nulla omnis. Porro eos ipsam iure sit reiciendis quo cum impedit molestias harum illum totam magni est, tempore, dolorem quidem rem. Distinctio iure unde assumenda repudiandae, id architecto dolorem, beatae sapiente quam magnam excepturi. Beatae adipisci aspernatur illo consequuntur, quo inventore veritatis perspiciatis aliquid, illum tempore, esse rerum non. Molestias molestiae, quod ipsam. Distinctio maxime blanditiis dicta modi in ipsum totam quae aut consectetur possimus inventore nesciunt, mollitia quod at fugit repellendus provident est nostrum. Eius delectus, fuga, praesentium odio quae enim nobis, odit fugit commodi cupiditate excepturi quos numquam adipisci error. Odio quae porro neque. Rerum sapiente inventore numquam deleniti facilis enim voluptate, illum itaque culpa dolorem omnis asperiores rem, impedit cum, fugiat. Consequuntur, consequatur voluptatum. Optio itaque veniam earum ipsam, eaque cum quia fugit quibusdam atque, dolores, officiis amet eligendi mollitia eveniet ab tempore dignissimos rerum impedit. Commodi quidem praesentium aliquam veritatis alias numquam officia pariatur ab. Quod nihil minus voluptate veritatis rerum id laudantium distinctio dolor repudiandae. Dolor, odio. Laboriosam libero quos aut doloremque explicabo harum, vitae sed saepe obcaecati natus perspiciatis ut voluptates accusamus totam. Veniam sint dignissimos, error alias perspiciatis illum adipisci tempora necessitatibus pariatur maiores esse, iusto delectus qui molestiae reprehenderit amet soluta at sunt blanditiis animi architecto temporibus fugiat? Consequatur ipsam laborum, et enim deleniti blanditiis voluptatibus pariatur molestiae alias quam velit placeat ut aliquid quibusdam omnis, doloribus. Error harum, nam ab est beatae sed consequatur facilis magni, deserunt animi reiciendis pariatur, inventore doloremque saepe. Nostrum, aliquam, asperiores. Eum cupiditate officiis dolor laborum dolorem incidunt tempore et omnis dolorum, explicabo repellendus rerum animi ducimus. Libero dicta molestiae placeat amet accusamus, odio eos ex temporibus, dolor quidem quam nulla obcaecati ipsam, provident ullam! Illum facere laborum, officia eum optio doloremque accusantium corrupti suscipit consectetur quidem, omnis unde et natus eaque veritatis dolore excepturi officiis quod, ipsam molestias a dolorem. Corporis fugit natus rerum, ducimus ipsa possimus! Unde, aliquid, sit dicta voluptas iste velit quas laudantium illo esse earum nostrum laboriosam aspernatur omnis est quisquam eveniet accusamus! Quidem dolorum accusantium numquam veritatis repudiandae. Debitis ex quibusdam sunt iste sed. Deserunt dignissimos ex accusamus quibusdam cupiditate eligendi, atque deleniti dolor recusandae id eum animi aliquid totam est esse perspiciatis fugiat nihil! Architecto nam, laudantium totam, veritatis quo animi a molestias facere ad sed quidem. Eaque natus, mollitia repudiandae culpa illo neque quo repellat odio ad, delectus amet dolore tempore. Vero, incidunt! Nostrum ratione similique repellendus fugiat debitis dolore, ad illo. Neque voluptates, facilis voluptate nostrum maiores libero deserunt repellendus, nesciunt velit, ducimus accusamus, pariatur. Optio omnis illo, saepe ad fuga expedita tempora aliquid illum vero repellat totam rem praesentium ipsam. Reiciendis ad, eligendi repudiandae est sed dolore asperiores enim, ducimus dignissimos quibusdam magnam doloribus facilis. Sequi dolorem illo, similique possimus recusandae id exercitationem debitis. Odit voluptas, neque atque molestiae rerum iure impedit ipsam ipsa autem itaque, fuga vel at, voluptatum deleniti eius veritatis consectetur natus tenetur. Laudantium quam molestiae maxime magnam, quae itaque quos provident illo iste totam porro expedita iure enim nulla quidem debitis. Accusamus eius voluptates odio inventore in optio expedita totam deleniti incidunt eos sed, labore vitae temporibus, fuga earum autem placeat, quidem cupiditate magni, voluptatibus eum iste. Vel cum culpa ratione nam tempora, qui sunt assumenda voluptatibus officiis vitae laborum hic iure possimus, dicta aspernatur adipisci magni, at aperiam corporis. Ipsam possimus sit maiores ipsum incidunt enim ipsa ex labore aspernatur cum, ut error. Sunt harum obcaecati explicabo nobis, esse cupiditate assumenda recusandae iste molestiae, quae maxime delectus magni quibusdam, iusto odio totam et aliquid laboriosam fugit ad voluptate. Recusandae error fugit nam necessitatibus optio perferendis dolorum iure beatae quod, odio. Soluta dolor totam, corporis magni earum, nobis commodi eaque odio obcaecati quaerat quidem quisquam atque officia quia provident numquam doloribus eveniet impedit, temporibus neque. Sit nostrum consequuntur alias pariatur dolor dignissimos, reprehenderit consequatur facere voluptatem, voluptatibus non cumque et natus. At dolor, beatae iure sint. Ut voluptates quas ratione culpa, perspiciatis ullam suscipit illo quaerat, pariatur facilis excepturi accusantium perferendis fuga recusandae molestiae omnis vero reprehenderit ex alias nulla dolor, quae natus eum. Necessitatibus cum, dolorum harum veritatis porro recusandae dolor placeat a repellendus, quam sit nam. Possimus facilis quidem tenetur, minima optio doloribus incidunt, dolorum? Tenetur maxime impedit, eius culpa id amet quaerat, ipsum similique! Vitae aliquam voluptatibus, inventore, consectetur ab obcaecati laudantium a modi fuga iure sit cum, nulla dolorem optio beatae asperiores. Reprehenderit repellat explicabo distinctio recusandae dignissimos ut itaque dolorem. Error, fugiat est unde minus aliquid quo quis repellat, possimus hic, mollitia quam. Quae quis ex tenetur earum dolore illum incidunt maiores aspernatur, error doloribus veniam, aliquid, odio accusantium quidem dolorem neque assumenda nesciunt modi cupiditate recusandae iure! Qui deserunt atque quis incidunt! Ducimus, quod esse harum quis odit vero quia, illo voluptas iure rerum repudiandae officia aliquam natus accusantium fugiat cupiditate architecto quam ipsa facere. Molestias aperiam qui, aliquid nisi placeat voluptatem ducimus quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias vero numquam, tenetur cum excepturi optio, ipsum error amet facilis ad beatae eveniet eum inventore iusto delectus. Perspiciatis recusandae, inventore dignissimos necessitatibus reiciendis sint culpa est reprehenderit dolore saepe? Amet quisquam necessitatibus minima obcaecati corporis quidem voluptates ducimus consequatur, incidunt recusandae quae autem rerum adipisci deserunt porro, eveniet impedit earum ad deleniti reiciendis et illum? Cumque temporibus minima quaerat molestias, voluptas tempora inventore mollitia voluptatem quae rerum exercitationem hic veniam expedita, officia maiores at non odio eaque, iste facilis illo fugit cum? Optio temporibus atque facilis fugiat nemo, blanditiis, magnam deserunt praesentium autem incidunt totam aliquid natus quisquam ut iure veniam neque molestias saepe voluptates, expedita debitis nesciunt recusandae. Inventore iure consequuntur eum sit ipsam molestias ratione a harum quidem adipisci saepe aspernatur nostrum praesentium debitis unde ullam autem eos eligendi possimus voluptatum expedita amet fuga minus, nulla. Ipsam laborum itaque alias placeat iure, dolore eveniet quasi temporibus reprehenderit reiciendis necessitatibus asperiores vel fugit magni ipsum natus. Temporibus quos iste, reprehenderit assumenda officia id nobis rem? Ducimus delectus ipsum, quos placeat sint, error laudantium vero. Minus, officia, numquam? Deleniti accusamus accusantium eum similique eligendi doloremque rerum autem cum optio nostrum architecto, iusto tenetur inventore incidunt doloribus. Sapiente veniam ullam eaque quasi non neque tenetur, suscipit itaque cum reiciendis laudantium omnis ut consectetur commodi vitae nobis libero maxime ipsum sint magnam hic voluptates aliquid alias. Sed laboriosam illo dolorem voluptates libero, odio architecto doloremque qui accusantium in sapiente minus, id quos, ab eum nesciunt, quam nihil! Possimus quidem eum excepturi laboriosam! Vero dicta architecto velit tempore, unde adipisci, magni quod alias veniam omnis eum maiores autem qui natus dignissimos! Numquam, consequuntur, quisquam. Unde perferendis ullam magni maxime ipsa inventore, neque debitis, laudantium assumenda ex possimus deleniti voluptatibus rem quod odit molestias nulla voluptates placeat quae quis mollitia, ipsam tempora. Voluptates cupiditate ducimus perspiciatis suscipit, inventore, facere totam. Maxime, fugiat aperiam laboriosam facere dolor excepturi saepe perspiciatis quam earum eius a amet iure atque similique veniam quidem cum culpa facilis hic minus sit, incidunt voluptates eligendi dolores. Sequi optio adipisci consectetur amet, tempora voluptate, repudiandae earum pariatur ratione nostrum illo quas sit, quis. Obcaecati provident dolorum porro cum incidunt. Possimus praesentium nihil libero ullam nobis accusantium voluptatum nesciunt iure esse rem recusandae officia nisi, ipsa tenetur error iste sapiente soluta sequi modi, quia animi cum nulla omnis. Porro eos ipsam iure sit reiciendis quo cum impedit molestias harum illum totam magni est, tempore, dolorem quidem rem. Distinctio iure unde assumenda repudiandae, id architecto dolorem, beatae sapiente quam magnam excepturi. Beatae adipisci aspernatur illo consequuntur, quo inventore veritatis perspiciatis aliquid, illum tempore, esse rerum non. Molestias molestiae, quod ipsam. Distinctio maxime blanditiis dicta modi in ipsum totam quae aut consectetur possimus inventore nesciunt, mollitia quod at fugit repellendus provident est nostrum. Eius delectus, fuga, praesentium odio quae enim nobis, odit fugit commodi cupiditate excepturi quos numquam adipisci error. Odio quae porro neque. Rerum sapiente inventore numquam deleniti facilis enim voluptate, illum itaque culpa dolorem omnis asperiores rem, impedit cum, fugiat. Consequuntur, consequatur voluptatum. Optio itaque veniam earum ipsam, eaque cum quia fugit quibusdam atque, dolores, officiis amet eligendi mollitia eveniet ab tempore dignissimos rerum impedit. Commodi quidem praesentium aliquam veritatis alias numquam officia pariatur ab. Quod nihil minus voluptate veritatis rerum id laudantium distinctio dolor repudiandae. Dolor, odio. Laboriosam libero quos aut doloremque explicabo harum, vitae sed saepe obcaecati natus perspiciatis ut voluptates accusamus totam. Veniam sint dignissimos, error alias perspiciatis illum adipisci tempora necessitatibus pariatur maiores esse, iusto delectus qui molestiae reprehenderit amet soluta at sunt blanditiis animi architecto temporibus fugiat? Consequatur ipsam laborum, et enim deleniti blanditiis voluptatibus pariatur molestiae alias quam velit placeat ut aliquid quibusdam omnis, doloribus. Error harum, nam ab est beatae sed consequatur facilis magni, deserunt animi reiciendis pariatur, inventore doloremque saepe. Nostrum, aliquam, asperiores. Eum cupiditate officiis dolor laborum dolorem incidunt tempore et omnis dolorum, explicabo repellendus rerum animi ducimus. Libero dicta molestiae placeat amet accusamus, odio eos ex temporibus, dolor quidem quam nulla obcaecati ipsam, provident ullam! Illum facere laborum, officia eum optio doloremque accusantium corrupti suscipit consectetur quidem, omnis unde et natus eaque veritatis dolore excepturi officiis quod, ipsam molestias a dolorem. Corporis fugit natus rerum, ducimus ipsa possimus! Unde, aliquid, sit dicta voluptas iste velit quas laudantium illo esse earum nostrum laboriosam aspernatur omnis est quisquam eveniet accusamus! Quidem dolorum accusantium numquam veritatis repudiandae. Debitis ex quibusdam sunt iste sed. Deserunt dignissimos ex accusamus quibusdam cupiditate eligendi, atque deleniti dolor recusandae id eum animi aliquid totam est esse perspiciatis fugiat nihil! Architecto nam, laudantium totam, veritatis quo animi a molestias facere ad sed quidem. Eaque natus, mollitia repudiandae culpa illo neque quo repellat odio ad, delectus amet dolore tempore. Vero, incidunt! Nostrum ratione similique repellendus fugiat debitis dolore, ad illo. Neque voluptates, facilis voluptate nostrum maiores libero deserunt repellendus, nesciunt velit, ducimus accusamus, pariatur. Optio omnis illo, saepe ad fuga expedita tempora aliquid illum vero repellat totam rem praesentium ipsam. Reiciendis ad, eligendi repudiandae est sed dolore asperiores enim, ducimus dignissimos quibusdam magnam doloribus facilis. Sequi dolorem illo, similique possimus recusandae id exercitationem debitis. Odit voluptas, neque atque molestiae rerum iure impedit ipsam ipsa autem itaque, fuga vel at, voluptatum deleniti eius veritatis consectetur natus tenetur. Laudantium quam molestiae maxime magnam, quae itaque quos provident illo iste totam porro expedita iure enim nulla quidem debitis. Accusamus eius voluptates odio inventore in optio expedita totam deleniti incidunt eos sed, labore vitae temporibus, fuga earum autem placeat, quidem cupiditate magni, voluptatibus eum iste. Vel cum culpa ratione nam tempora, qui sunt assumenda voluptatibus officiis vitae laborum hic iure possimus, dicta aspernatur adipisci magni, at aperiam corporis. Ipsam possimus sit maiores ipsum incidunt enim ipsa ex labore aspernatur cum, ut error. Sunt harum obcaecati explicabo nobis, esse cupiditate assumenda recusandae iste molestiae, quae maxime delectus magni quibusdam, iusto odio totam et aliquid laboriosam fugit ad voluptate. Recusandae error fugit nam necessitatibus optio perferendis dolorum iure beatae quod, odio. Soluta dolor totam, corporis magni earum, nobis commodi eaque odio obcaecati quaerat quidem quisquam atque officia quia provident numquam doloribus eveniet impedit, temporibus neque. Sit nostrum consequuntur alias pariatur dolor dignissimos, reprehenderit consequatur facere voluptatem, voluptatibus non cumque et natus. At dolor, beatae iure sint. Ut voluptates quas ratione culpa, perspiciatis ullam suscipit illo quaerat, pariatur facilis excepturi accusantium perferendis fuga recusandae molestiae omnis vero reprehenderit ex alias nulla dolor, quae natus eum. Necessitatibus cum, dolorum harum veritatis porro recusandae dolor placeat a repellendus, quam sit nam. Possimus facilis quidem tenetur, minima optio doloribus incidunt, dolorum? Tenetur maxime impedit, eius culpa id amet quaerat, ipsum similique! Vitae aliquam voluptatibus, inventore, consectetur ab obcaecati laudantium a modi fuga iure sit cum, nulla dolorem optio beatae asperiores. Reprehenderit repellat explicabo distinctio recusandae dignissimos ut itaque dolorem. Error, fugiat est unde minus aliquid quo quis repellat, possimus hic, mollitia quam. Quae quis ex tenetur earum dolore illum incidunt maiores aspernatur, error doloribus veniam, aliquid, odio accusantium quidem dolorem neque assumenda nesciunt modi cupiditate recusandae iure! Qui deserunt atque quis incidunt! Ducimus, quod esse harum quis odit vero quia, illo voluptas iure rerum repudiandae officia aliquam natus accusantium fugiat cupiditate architecto quam ipsa facere. Molestias aperiam qui, aliquid nisi placeat voluptatem ducimus quam.</p>
</div>
<div class="container">
<div class="rel" style="position: relative;">
<div id="scrollup"><img alt="Arrow up" src="/img/up.png"></div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var scrollUp = document.getElementById('scrollup');
scrollUp.onmouseover = function() {
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() {
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() {
window.scrollTo(0,0);
};
window.onscroll = function () {
if ( window.pageYOffset > 0 ) {
scrollUp.style.display = 'block';
} else {
scrollUp.style.display = 'none';
}
};
};
</script>
</body>
</html>
答案 0 :(得分：0)
请帮助我理解你的问题。我试图运行你的代码片段，但它有问题。所以我在Codepen中尝试了你的代码，滚动到顶部工作正常。 https://codepen.io/DannaB67/pen/eRgrrM
<强> HTML
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias vero numquam, tenetur cum excepturi optio, ipsum error amet facilis ad beatae eveniet eum inventore iusto delectus. Perspiciatis recusandae, inventore dignissimos necessitatibus reiciendis sint culpa est reprehenderit dolore saepe? Amet quisquam necessitatibus minima obcaecati corporis quidem voluptates ducimus consequatur, incidunt recusandae quae autem rerum adipisci deserunt porro, eveniet impedit earum ad deleniti reiciendis et illum? Cumque temporibus minima quaerat molestias, voluptas tempora inventore mollitia voluptatem quae rerum exercitationem hic veniam expedita, officia maiores at non odio eaque, iste facilis illo fugit cum? Optio temporibus atque facilis fugiat nemo, blanditiis, magnam deserunt praesentium autem incidunt totam aliquid natus quisquam ut iure veniam neque molestias saepe voluptates, expedita debitis nesciunt recusandae. Inventore iure consequuntur eum sit ipsam molestias ratione a harum quidem adipisci saepe aspernatur nostrum praesentium debitis unde ullam autem eos eligendi possimus voluptatum expedita amet fuga minus, nulla. Ipsam laborum itaque alias placeat iure, dolore eveniet quasi temporibus reprehenderit reiciendis necessitatibus asperiores vel fugit magni ipsum natus. Temporibus quos iste, reprehenderit assumenda officia id nobis rem? Ducimus delectus ipsum, quos placeat sint, error laudantium vero. Minus, officia, numquam? Deleniti accusamus accusantium eum similique eligendi doloremque rerum autem cum optio nostrum architecto, iusto tenetur inventore incidunt doloribus. Sapiente veniam ullam eaque quasi non neque tenetur, suscipit itaque cum reiciendis laudantium omnis ut consectetur commodi vitae nobis libero maxime ipsum sint magnam hic voluptates aliquid alias. Sed laboriosam illo dolorem voluptates libero, odio architecto doloremque qui accusantium in sapiente minus, id quos, ab eum nesciunt, quam nihil! Possimus quidem eum excepturi laboriosam! Vero dicta architecto velit tempore, unde adipisci, magni quod alias veniam omnis eum maiores autem qui natus dignissimos! Numquam, consequuntur, quisquam. Unde perferendis ullam magni maxime ipsa inventore, neque debitis, laudantium assumenda ex possimus deleniti voluptatibus rem quod odit molestias nulla voluptates placeat quae quis mollitia, ipsam tempora. Voluptates cupiditate ducimus perspiciatis suscipit, inventore, facere totam. Maxime, fugiat aperiam laboriosam facere dolor excepturi saepe perspiciatis quam earum eius a amet iure atque similique veniam quidem cum culpa facilis hic minus sit, incidunt voluptates eligendi dolores. Sequi optio adipisci consectetur amet, tempora voluptate, repudiandae earum pariatur ratione nostrum illo quas sit, quis. Obcaecati provident dolorum porro cum incidunt. Possimus praesentium nihil libero ullam nobis accusantium voluptatum nesciunt iure esse rem recusandae officia nisi, ipsa tenetur error iste sapiente soluta sequi modi, quia animi cum nulla omnis. Porro eos ipsam iure sit reiciendis quo cum impedit molestias harum illum totam magni est, tempore, dolorem quidem rem. Distinctio iure unde assumenda repudiandae, id architecto dolorem, beatae sapiente quam magnam excepturi. Beatae adipisci aspernatur illo consequuntur, quo inventore veritatis perspiciatis aliquid, illum tempore, esse rerum non. Molestias molestiae, quod ipsam. Distinctio maxime blanditiis dicta modi in ipsum totam quae aut consectetur possimus inventore nesciunt, mollitia quod at fugit repellendus provident est nostrum. Eius delectus, fuga, praesentium odio quae enim nobis, odit fugit commodi cupiditate excepturi quos numquam adipisci error. Odio quae porro neque. Rerum sapiente inventore numquam deleniti facilis enim voluptate, illum itaque culpa dolorem omnis asperiores rem, impedit cum, fugiat. Consequuntur, consequatur voluptatum. Optio itaque veniam earum ipsam, eaque cum quia fugit quibusdam atque, dolores, officiis amet eligendi mollitia eveniet ab tempore dignissimos rerum impedit. Commodi quidem praesentium aliquam veritatis alias numquam officia pariatur ab. Quod nihil minus voluptate veritatis rerum id laudantium distinctio dolor repudiandae. Dolor, odio. Laboriosam libero quos aut doloremque explicabo harum, vitae sed saepe obcaecati natus perspiciatis ut voluptates accusamus totam. Veniam sint dignissimos, error alias perspiciatis illum adipisci tempora necessitatibus pariatur maiores esse, iusto delectus qui molestiae reprehenderit amet soluta at sunt blanditiis animi architecto temporibus fugiat? Consequatur ipsam laborum, et enim deleniti blanditiis voluptatibus pariatur molestiae alias quam velit placeat ut aliquid quibusdam omnis, doloribus. Error harum, nam ab est beatae sed consequatur facilis magni, deserunt animi reiciendis pariatur, inventore doloremque saepe. Nostrum, aliquam, asperiores. Eum cupiditate officiis dolor laborum dolorem incidunt tempore et omnis dolorum, explicabo repellendus rerum animi ducimus. Libero dicta molestiae placeat amet accusamus, odio eos ex temporibus, dolor quidem quam nulla obcaecati ipsam, provident ullam! Illum facere laborum, officia eum optio doloremque accusantium corrupti suscipit consectetur quidem, omnis unde et natus eaque veritatis dolore excepturi officiis quod, ipsam molestias a dolorem. Corporis fugit natus rerum, ducimus ipsa possimus! Unde, aliquid, sit dicta voluptas iste velit quas laudantium illo esse earum nostrum laboriosam aspernatur omnis est quisquam eveniet accusamus! Quidem dolorum accusantium numquam veritatis repudiandae. Debitis ex quibusdam sunt iste sed. Deserunt dignissimos ex accusamus quibusdam cupiditate eligendi, atque deleniti dolor recusandae id eum animi aliquid totam est esse perspiciatis fugiat nihil! Architecto nam, laudantium totam, veritatis quo animi a molestias facere ad sed quidem. Eaque natus, mollitia repudiandae culpa illo neque quo repellat odio ad, delectus amet dolore tempore. Vero, incidunt! Nostrum ratione similique repellendus fugiat debitis dolore, ad illo. Neque voluptates, facilis voluptate nostrum maiores libero deserunt repellendus, nesciunt velit, ducimus accusamus, pariatur. Optio omnis illo, saepe ad fuga expedita tempora aliquid illum vero repellat totam rem praesentium ipsam. Reiciendis ad, eligendi repudiandae est sed dolore asperiores enim, ducimus dignissimos quibusdam magnam doloribus facilis. Sequi dolorem illo, similique possimus recusandae id exercitationem debitis. Odit voluptas, neque atque molestiae rerum iure impedit ipsam ipsa autem itaque, fuga vel at, voluptatum deleniti eius veritatis consectetur natus tenetur. Laudantium quam molestiae maxime magnam, quae itaque quos provident illo iste totam porro expedita iure enim nulla quidem debitis. Accusamus eius voluptates odio inventore in optio expedita totam deleniti incidunt eos sed, labore vitae temporibus, fuga earum autem placeat, quidem cupiditate magni, voluptatibus eum iste. Vel cum culpa ratione nam tempora, qui sunt assumenda voluptatibus officiis vitae laborum hic iure possimus, dicta aspernatur adipisci magni, at aperiam corporis. Ipsam possimus sit maiores ipsum incidunt enim ipsa ex labore aspernatur cum, ut error. Sunt harum obcaecati explicabo nobis, esse cupiditate assumenda recusandae iste molestiae, quae maxime delectus magni quibusdam, iusto odio totam et aliquid laboriosam fugit ad voluptate. Recusandae error fugit nam necessitatibus optio perferendis dolorum iure beatae quod, odio. Soluta dolor totam, corporis magni earum, nobis commodi eaque odio obcaecati quaerat quidem quisquam atque officia quia provident numquam doloribus eveniet impedit, temporibus neque. Sit nostrum consequuntur alias pariatur dolor dignissimos, reprehenderit consequatur facere voluptatem, voluptatibus non cumque et natus. At dolor, beatae iure sint. Ut voluptates quas ratione culpa, perspiciatis ullam suscipit illo quaerat, pariatur facilis excepturi accusantium perferendis fuga recusandae molestiae omnis vero reprehenderit ex alias nulla dolor, quae natus eum. Necessitatibus cum, dolorum harum veritatis porro recusandae dolor placeat a repellendus, quam sit nam. Possimus facilis quidem tenetur, minima optio doloribus incidunt, dolorum? Tenetur maxime impedit, eius culpa id amet quaerat, ipsum similique! Vitae aliquam voluptatibus, inventore, consectetur ab obcaecati laudantium a modi fuga iure sit cum, nulla dolorem optio beatae asperiores. Reprehenderit repellat explicabo distinctio recusandae dignissimos ut itaque dolorem. Error, fugiat est unde minus aliquid quo quis repellat, possimus hic, mollitia quam. Quae quis ex tenetur earum dolore illum incidunt maiores aspernatur, error doloribus veniam, aliquid, odio accusantium quidem dolorem neque assumenda nesciunt modi cupiditate recusandae iure! Qui deserunt atque quis incidunt! Ducimus, quod esse harum quis odit vero quia, illo voluptas iure rerum repudiandae officia aliquam natus accusantium fugiat cupiditate architecto quam ipsa facere. Molestias aperiam qui, aliquid nisi placeat voluptatem ducimus quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias vero numquam, tenetur cum excepturi optio, ipsum error amet facilis ad beatae eveniet eum inventore iusto delectus. Perspiciatis recusandae, inventore dignissimos necessitatibus reiciendis sint culpa est reprehenderit dolore saepe? Amet quisquam necessitatibus minima obcaecati corporis quidem voluptates ducimus consequatur, incidunt recusandae quae autem rerum adipisci deserunt porro, eveniet impedit earum ad deleniti reiciendis et illum? Cumque temporibus minima quaerat molestias, voluptas tempora inventore mollitia voluptatem quae rerum exercitationem hic veniam expedita, officia maiores at non odio eaque, iste facilis illo fugit cum? Optio temporibus atque facilis fugiat nemo, blanditiis, magnam deserunt praesentium autem incidunt totam aliquid natus quisquam ut iure veniam neque molestias saepe voluptates, expedita debitis nesciunt recusandae. Inventore iure consequuntur eum sit ipsam molestias ratione a harum quidem adipisci saepe aspernatur nostrum praesentium debitis unde ullam autem eos eligendi possimus voluptatum expedita amet fuga minus, nulla. Ipsam laborum itaque alias placeat iure, dolore eveniet quasi temporibus reprehenderit reiciendis necessitatibus asperiores vel fugit magni ipsum natus. Temporibus quos iste, reprehenderit assumenda officia id nobis rem? Ducimus delectus ipsum, quos placeat sint, error laudantium vero. Minus, officia, numquam? Deleniti accusamus accusantium eum similique eligendi doloremque rerum autem cum optio nostrum architecto, iusto tenetur inventore incidunt doloribus. Sapiente veniam ullam eaque quasi non neque tenetur, suscipit itaque cum reiciendis laudantium omnis ut consectetur commodi vitae nobis libero maxime ipsum sint magnam hic voluptates aliquid alias. Sed laboriosam illo dolorem voluptates libero, odio architecto doloremque qui accusantium in sapiente minus, id quos, ab eum nesciunt, quam nihil! Possimus quidem eum excepturi laboriosam! Vero dicta architecto velit tempore, unde adipisci, magni quod alias veniam omnis eum maiores autem qui natus dignissimos! Numquam, consequuntur, quisquam. Unde perferendis ullam magni maxime ipsa inventore, neque debitis, laudantium assumenda ex possimus deleniti voluptatibus rem quod odit molestias nulla voluptates placeat quae quis mollitia, ipsam tempora. Voluptates cupiditate ducimus perspiciatis suscipit, inventore, facere totam. Maxime, fugiat aperiam laboriosam facere dolor excepturi saepe perspiciatis quam earum eius a amet iure atque similique veniam quidem cum culpa facilis hic minus sit, incidunt voluptates eligendi dolores. Sequi optio adipisci consectetur amet, tempora voluptate, repudiandae earum pariatur ratione nostrum illo quas sit, quis. Obcaecati provident dolorum porro cum incidunt. Possimus praesentium nihil libero ullam nobis accusantium voluptatum nesciunt iure esse rem recusandae officia nisi, ipsa tenetur error iste sapiente soluta sequi modi, quia animi cum nulla omnis. Porro eos ipsam iure sit reiciendis quo cum impedit molestias harum illum totam magni est, tempore, dolorem quidem rem. Distinctio iure unde assumenda repudiandae, id architecto dolorem, beatae sapiente quam magnam excepturi. Beatae adipisci aspernatur illo consequuntur, quo inventore veritatis perspiciatis aliquid, illum tempore, esse rerum non. Molestias molestiae, quod ipsam. Distinctio maxime blanditiis dicta modi in ipsum totam quae aut consectetur possimus inventore nesciunt, mollitia quod at fugit repellendus provident est nostrum. Eius delectus, fuga, praesentium odio quae enim nobis, odit fugit commodi cupiditate excepturi quos numquam adipisci error. Odio quae porro neque. Rerum sapiente inventore numquam deleniti facilis enim voluptate, illum itaque culpa dolorem omnis asperiores rem, impedit cum, fugiat. Consequuntur, consequatur voluptatum. Optio itaque veniam earum ipsam, eaque cum quia fugit quibusdam atque, dolores, officiis amet eligendi mollitia eveniet ab tempore dignissimos rerum impedit. Commodi quidem praesentium aliquam veritatis alias numquam officia pariatur ab. Quod nihil minus voluptate veritatis rerum id laudantium distinctio dolor repudiandae. Dolor, odio. Laboriosam libero quos aut doloremque explicabo harum, vitae sed saepe obcaecati natus perspiciatis ut voluptates accusamus totam. Veniam sint dignissimos, error alias perspiciatis illum adipisci tempora necessitatibus pariatur maiores esse, iusto delectus qui molestiae reprehenderit amet soluta at sunt blanditiis animi architecto temporibus fugiat? Consequatur ipsam laborum, et enim deleniti blanditiis voluptatibus pariatur molestiae alias quam velit placeat ut aliquid quibusdam omnis, doloribus. Error harum, nam ab est beatae sed consequatur facilis magni, deserunt animi reiciendis pariatur, inventore doloremque saepe. Nostrum, aliquam, asperiores. Eum cupiditate officiis dolor laborum dolorem incidunt tempore et omnis dolorum, explicabo repellendus rerum animi ducimus. Libero dicta molestiae placeat amet accusamus, odio eos ex temporibus, dolor quidem quam nulla obcaecati ipsam, provident ullam! Illum facere laborum, officia eum optio doloremque accusantium corrupti suscipit consectetur quidem, omnis unde et natus eaque veritatis dolore excepturi officiis quod, ipsam molestias a dolorem. Corporis fugit natus rerum, ducimus ipsa possimus! Unde, aliquid, sit dicta voluptas iste velit quas laudantium illo esse earum nostrum laboriosam aspernatur omnis est quisquam eveniet accusamus! Quidem dolorum accusantium numquam veritatis repudiandae. Debitis ex quibusdam sunt iste sed. Deserunt dignissimos ex accusamus quibusdam cupiditate eligendi, atque deleniti dolor recusandae id eum animi aliquid totam est esse perspiciatis fugiat nihil! Architecto nam, laudantium totam, veritatis quo animi a molestias facere ad sed quidem. Eaque natus, mollitia repudiandae culpa illo neque quo repellat odio ad, delectus amet dolore tempore. Vero, incidunt! Nostrum ratione similique repellendus fugiat debitis dolore, ad illo. Neque voluptates, facilis voluptate nostrum maiores libero deserunt repellendus, nesciunt velit, ducimus accusamus, pariatur. Optio omnis illo, saepe ad fuga expedita tempora aliquid illum vero repellat totam rem praesentium ipsam. Reiciendis ad, eligendi repudiandae est sed dolore asperiores enim, ducimus dignissimos quibusdam magnam doloribus facilis. Sequi dolorem illo, similique possimus recusandae id exercitationem debitis. Odit voluptas, neque atque molestiae rerum iure impedit ipsam ipsa autem itaque, fuga vel at, voluptatum deleniti eius veritatis consectetur natus tenetur. Laudantium quam molestiae maxime magnam, quae itaque quos provident illo iste totam porro expedita iure enim nulla quidem debitis. Accusamus eius voluptates odio inventore in optio expedita totam deleniti incidunt eos sed, labore vitae temporibus, fuga earum autem placeat, quidem cupiditate magni, voluptatibus eum iste. Vel cum culpa ratione nam tempora, qui sunt assumenda voluptatibus officiis vitae laborum hic iure possimus, dicta aspernatur adipisci magni, at aperiam corporis. Ipsam possimus sit maiores ipsum incidunt enim ipsa ex labore aspernatur cum, ut error. Sunt harum obcaecati explicabo nobis, esse cupiditate assumenda recusandae iste molestiae, quae maxime delectus magni quibusdam, iusto odio totam et aliquid laboriosam fugit ad voluptate. Recusandae error fugit nam necessitatibus optio perferendis dolorum iure beatae quod, odio. Soluta dolor totam, corporis magni earum, nobis commodi eaque odio obcaecati quaerat quidem quisquam atque officia quia provident numquam doloribus eveniet impedit, temporibus neque. Sit nostrum consequuntur alias pariatur dolor dignissimos, reprehenderit consequatur facere voluptatem, voluptatibus non cumque et natus. At dolor, beatae iure sint. Ut voluptates quas ratione culpa, perspiciatis ullam suscipit illo quaerat, pariatur facilis excepturi accusantium perferendis fuga recusandae molestiae omnis vero reprehenderit ex alias nulla dolor, quae natus eum. Necessitatibus cum, dolorum harum veritatis porro recusandae dolor placeat a repellendus, quam sit nam. Possimus facilis quidem tenetur, minima optio doloribus incidunt, dolorum? Tenetur maxime impedit, eius culpa id amet quaerat, ipsum similique! Vitae aliquam voluptatibus, inventore, consectetur ab obcaecati laudantium a modi fuga iure sit cum, nulla dolorem optio beatae asperiores. Reprehenderit repellat explicabo distinctio recusandae dignissimos ut itaque dolorem. Error, fugiat est unde minus aliquid quo quis repellat, possimus hic, mollitia quam. Quae quis ex tenetur earum dolore illum incidunt maiores aspernatur, error doloribus veniam, aliquid, odio accusantium quidem dolorem neque assumenda nesciunt modi cupiditate recusandae iure! Qui deserunt atque quis incidunt! Ducimus, quod esse harum quis odit vero quia, illo voluptas iure rerum repudiandae officia aliquam natus accusantium fugiat cupiditate architecto quam ipsa facere. Molestias aperiam qui, aliquid nisi placeat voluptatem ducimus quam.
</p>
</div>
<div class="container">
<div class="rel" style="position: relative;">
<div id="scrollup"><img alt="Arrow up" src="/img/up.png"> </div>
</div>
</div>
<强> CSS
.cont {
width: 1192px;
}
.container {
width: 1300px;
}
#scrollup {
position: fixed;
opacity: 0.8;
padding: 15px 10px 10px;
background: #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px;
bottom: 10px;
display: none;
cursor: pointer;
}
<强> JS
window.onload = function() {
var scrollUp = document.getElementById('scrollup');
scrollUp.onmouseover = function() {
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() {
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() {
window.scrollTo(0,0);
};
window.onscroll = function () {
if ( window.pageYOffset > 0 ) {
scrollUp.style.display = 'block';
}
else {
scrollUp.style.display = 'none';
}
};
};
答案 1 :(得分：0)
我使用@media查询获得比1300px更大的分辨率。对CSS和HTML进行了一些更改。希望它按照你的要求工作：）
https://codepen.io/DannaB67/pen/eRgrrM
<强> CSS
<style>
.cont {
width: 1192px;
}
#container {
width: 1300px;
height:100%;
postion:relative;
}
#scrollup {
width:1300px;
position:fixed;
bottom:10px;
left:10px;
opacity: 0.8;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
display: none;
cursor: pointer;
}
@media only screen and (max-width: 10000px){
/* For screen bigger then 1300px */
#scrolltop, #container {
width:1300px;
}
})
</style>
<强> HTML
<div id="container">
<div class="cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias vero numquam, tenetur cum excepturi optio, ipsum error amet facilis ad beatae eveniet eum inventore iusto delectus. <!----duplicate content here----->
</p>
</div>
<div align="right" id="scrollup">
<img alt="Arrow up" src="/img/up.png" width="100">
</div>
<强> JS
<script>
window.onload = function() {
var scrollUp = document.getElementById('scrollup');
scrollUp.onmouseover = function() {
scrollUp.style.opacity=0.3;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() {
scrollUp.style.opacity = 0.5;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() {
window.scrollTo(0,0);
};
window.onscroll = function () {
if ( window.pageYOffset > 0 ) {
scrollUp.style.display = 'block';
} else {
scrollUp.style.display = 'none';
}
};
};
</script>
答案 2 :(得分：0)
如果你想要使用固定div的块元素，则不应该应用left和top属性。如果你想在块中找到固定的div，你可以使用margin-left和margin-top。