Have three divs inside a container div. If I make position : fixed of the div.one the div.two is going behind the div.one. If i make div.two position :fixed then it's covering the div.one. I want to make both divs stick one after another without overlapping. The height of the divs should be as declared and the third div also will be same. It should be scrollable and start right below the second div

Here is the minimal reproduced example :

.one{
  width: 100%;
  background: red;
  position: fixed;
  top: 0;
}
.two{

  width: 100%;
  background: blue;
  /* position: fixed; */

}
.three{}

 <div >
  <div >
    one
  </div>
  <div >
    two
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas facilis aperiam ullam enim, sed iste quia magnam eos cumque repellat deleniti qui at itaque quisquam? Dolore animi ad incidunt temporibus distinctio totam, quasi ullam, magnam dignissimos, voluptatibus vitae illum aspernatur odit! Fugit a est sint nisi labore eius officiis! Eveniet velit sint, mollitia obcaecati fugit assumenda dolores, consequatur corporis blanditiis nulla, est a. Ex unde delectus voluptate explicabo sunt nihil officiis quasi, totam harum at. Laborum, quam quod. Beatae incidunt non fuga id corporis, veniam nam molestiae repellendus esse culpa possimus temporibus quisquam. Saepe ipsa, rem amet nesciunt ratione officiis itaque dolorem corporis blanditiis iste vero deleniti reiciendis? Impedit ratione tempore assumenda sapiente. Pariatur voluptatum fuga voluptates numquam eligendi dignissimos doloribus odit, laudantium ea eveniet iste quisquam vitae veniam labore. Quod sed quam autem dolorum nobis, mollitia saepe enim a illo sunt recusandae nihil tenetur quas explicabo aspernatur corporis reprehenderit ipsum praesentium? Omnis placeat quam porro dolorum unde aperiam velit dicta alias in, non debitis neque nobis nisi quaerat. Ratione, iusto assumenda. Error aliquam perferendis sequi doloremque suscipit obcaecati quae blanditiis nisi, ab consectetur, magnam omnis impedit ducimus. Qui nemo commodi id reprehenderit molestias tenetur accusantium corporis, maiores pariatur necessitatibus magnam doloribus tempora, nam esse ab! Incidunt possimus at ipsa natus dolor eos, deserunt excepturi vero eum nam fuga asperiores atque aspernatur architecto, blanditiis repudiandae totam consectetur ad facere voluptates. Labore, pariatur dolores. Sint accusamus ratione, officia amet fuga recusandae molestiae laudantium iste. Culpa reprehenderit inventore voluptatum incidunt non quibusdam excepturi beatae dolore unde qui fuga, mollitia quidem pariatur repellat, consectetur rem? Doloribus cum voluptatem quisquam quis impedit, totam pariatur, explicabo dolores optio laboriosam, perspiciatis rem. Provident rem sint voluptatum accusamus nemo ex sequi porro nesciunt nihil quisquam quaerat sunt, enim necessitatibus totam adipisci laudantium beatae quidem pariatur! Asperiores, esse suscipit unde, perspiciatis dignissimos harum aspernatur mollitia culpa, odio dolorem voluptas. Animi velit fugiat nobis dolore sint magni sit dignissimos dolorem. Nisi inventore natus explicabo distinctio quae architecto earum culpa, numquam aspernatur optio perspiciatis dicta corrupti illum a autem aliquid porro alias, dignissimos quidem libero! Iusto soluta voluptates inventore neque adipisci rerum? Nesciunt similique ad dolores officiis id, fugiat ut alias accusamus, corporis fugit magni nulla quam vitae? Esse, quos vitae cum, voluptas minus eius libero aliquam cumque, soluta expedita quam! Aperiam ratione optio neque blanditiis, id numquam officiis itaque explicabo eum sunt perspiciatis, corporis nobis. Doloribus ea vel illo, saepe delectus atque hic non? Ex dolores officiis eius odio praesentium voluptate debitis et minima blanditiis dolore vitae suscipit enim dolor voluptatem ducimus saepe fugit molestiae animi autem, unde facilis nihil totam delectus? Quas ea, expedita veniam alias perferendis sequi, odio voluptatem, earum corporis suscipit nemo asperiores sint accusamus voluptatibus ratione facilis a. Necessitatibus deleniti expedita aut fugiat commodi beatae, natus amet aperiam eaque minima iusto doloremque corporis quam laudantium perferendis, nihil rem obcaecati nisi, fugit culpa ad illo in incidunt facilis? Beatae ducimus deleniti esse voluptate debitis voluptatum inventore voluptates quos fuga architecto adipisci quisquam itaque, libero numquam sint, molestiae aperiam reprehenderit repellat nostrum ab nemo! Eum autem ipsam ratione libero vitae quaerat facere reiciendis, quos corrupti odit omnis modi officiis suscipit a magni rem debitis minima hic dolorum. Vitae ipsum blanditiis sit reiciendis nemo excepturi magni temporibus iusto repellat fugiat molestias labore mollitia, provident iure, ex sunt earum laudantium consectetur, numquam quae commodi? Nostrum dignissimos voluptate molestiae quod explicabo labore hic ullam, perspiciatis consectetur odit blanditiis a natus, quas quisquam non eligendi quae et veritatis debitis? Est exercitationem quasi cumque facilis laborum, quisquam ipsa similique obcaecati eligendi unde quod ad! Error quo natus eius ipsum magni molestias temporibus, quasi esse ex iusto voluptas repudiandae quae voluptatum suscipit, nisi tempora dolor fugit velit consectetur. Facilis praesentium et impedit nulla id ratione aut soluta neque sit explicabo placeat tempore quam deleniti commodi, dolorum officiis reprehenderit! Ut nesciunt repellendus perferendis enim reiciendis facere accusantium a incidunt harum adipisci commodi voluptate suscipit possimus laborum, officiis cupiditate iste molestias velit dolorum modi? Perspiciatis nostrum at natus dignissimos dicta sint iure ab reprehenderit quasi beatae, eligendi atque aut magni. Dolorem illo aliquam voluptas natus officia dolorum sunt similique libero, cum eius quae ab. Dignissimos culpa praesentium aperiam in nobis numquam, aliquid rerum adipisci error impedit! Quas error facere necessitatibus repellendus, tempore optio aliquid pariatur quisquam laboriosam sit? Quas modi quisquam corrupti placeat eaque consequatur consequuntur dicta. Explicabo obcaecati reiciendis alias omnis ipsam pariatur? Placeat, nesciunt culpa eum illum asperiores velit minus sequi iusto accusantium vero eaque iste a, reiciendis optio delectus quis rem soluta aspernatur laudantium? Enim sed rerum maxime nemo accusamus animi pariatur temporibus reprehenderit accusantium quaerat aperiam labore sint vitae harum delectus a adipisci aliquid, architecto, quasi sunt, eligendi blanditiis. Laudantium obcaecati doloremque modi totam neque unde esse rerum, dignissimos laboriosam atque aliquam beatae exercitationem odit sunt nostrum recusandae earum iusto cumque ut distinctio at. Tenetur at voluptas, porro ratione perferendis suscipit neque ullam quos voluptatum, pariatur nostrum dicta velit asperiores atque, iusto vitae. Tempore dignissimos aliquid doloremque explicabo non! Nam, voluptatem nihil at quod atque itaque laudantium maxime, soluta suscipit illum dolorem cumque natus, expedita excepturi vel. Rem modi doloremque consequatur perspiciatis quae ipsum, cumque tenetur accusamus et sint ad sit, sunt, maiores facilis pariatur dolores! Similique magni fugit sapiente modi voluptas eos error quaerat ut quidem delectus expedita porro in quibusdam, amet doloribus non eum necessitatibus temporibus ratione fugiat dignissimos velit accusamus illum quia? Repudiandae possimus vitae sequi sit veritatis, eum assumenda error odit quia officia quisquam quis amet ipsam dolorum ipsum vel quos doloremque, autem fugiat fugit quasi optio maiores consequatur? Eum vero quo quis possimus numquam porro sint dolorum vel aliquid deleniti tempore iusto commodi amet, optio soluta, quaerat hic neque? Veniam laborum nobis distinctio adipisci quo aliquam, alias eum neque nostrum sunt eligendi iure molestias voluptates id, impedit vero illo? Totam iure, nostrum nulla illum error id labore dignissimos sapiente alias qui sint ipsum eaque mollitia autem laudantium sunt odio enim cum provident voluptatibus cupiditate consectetur maiores! Ullam et hic inventore magnam eum amet earum veritatis corrupti.
  </div>
  </div>

CodePudding user response：

You could simply add margin-top: 50px; to div.two that's the height of the div.one.

And if you make div.two as fixed, then add margin-top: 100px; to the div.one that's the height of the div.two.

Hope it is helps, thank you.

CodePudding user response：

Set Position Sticky and top 50px to next div

.one {
  width: 100%;
  background: red;
  height: 50px;
  position: sticky;
  top: 0;
}
.two {
    width: 100%;
    background: blue;
    height: 100px;
    position: sticky;
    top: 50px;
    z-index: 9999;
    display: block;
}

 <div >
  <div >
    one
  </div>
  <div >
    two
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas facilis aperiam ullam enim, sed iste quia magnam eos cumque repellat deleniti qui at itaque quisquam? Dolore animi ad incidunt temporibus distinctio totam, quasi ullam, magnam dignissimos, voluptatibus vitae illum aspernatur odit! Fugit a est sint nisi labore eius officiis! Eveniet velit sint, mollitia obcaecati fugit assumenda dolores, consequatur corporis blanditiis nulla, est a. Ex unde delectus voluptate explicabo sunt nihil officiis quasi, totam harum at. Laborum, quam quod. Beatae incidunt non fuga id corporis, veniam nam molestiae repellendus esse culpa possimus temporibus quisquam. Saepe ipsa, rem amet nesciunt ratione officiis itaque dolorem corporis blanditiis iste vero deleniti reiciendis? Impedit ratione tempore assumenda sapiente. Pariatur voluptatum fuga voluptates numquam eligendi dignissimos doloribus odit, laudantium ea eveniet iste quisquam vitae veniam labore. Quod sed quam autem dolorum nobis, mollitia saepe enim a illo sunt recusandae nihil tenetur quas explicabo aspernatur corporis reprehenderit ipsum praesentium? Omnis placeat quam porro dolorum unde aperiam velit dicta alias in, non debitis neque nobis nisi quaerat. Ratione, iusto assumenda. Error aliquam perferendis sequi doloremque suscipit obcaecati quae blanditiis nisi, ab consectetur, magnam omnis impedit ducimus. Qui nemo commodi id reprehenderit molestias tenetur accusantium corporis, maiores pariatur necessitatibus magnam doloribus tempora, nam esse ab! Incidunt possimus at ipsa natus dolor eos, deserunt excepturi vero eum nam fuga asperiores atque aspernatur architecto, blanditiis repudiandae totam consectetur ad facere voluptates. Labore, pariatur dolores. Sint accusamus ratione, officia amet fuga recusandae molestiae laudantium iste. Culpa reprehenderit inventore voluptatum incidunt non quibusdam excepturi beatae dolore unde qui fuga, mollitia quidem pariatur repellat, consectetur rem? Doloribus cum voluptatem quisquam quis impedit, totam pariatur, explicabo dolores optio laboriosam, perspiciatis rem. Provident rem sint voluptatum accusamus nemo ex sequi porro nesciunt nihil quisquam quaerat sunt, enim necessitatibus totam adipisci laudantium beatae quidem pariatur! Asperiores, esse suscipit unde, perspiciatis dignissimos harum aspernatur mollitia culpa, odio dolorem voluptas. Animi velit fugiat nobis dolore sint magni sit dignissimos dolorem. Nisi inventore natus explicabo distinctio quae architecto earum culpa, numquam aspernatur optio perspiciatis dicta corrupti illum a autem aliquid porro alias, dignissimos quidem libero! Iusto soluta voluptates inventore neque adipisci rerum? Nesciunt similique ad dolores officiis id, fugiat ut alias accusamus, corporis fugit magni nulla quam vitae? Esse, quos vitae cum, voluptas minus eius libero aliquam cumque, soluta expedita quam! Aperiam ratione optio neque blanditiis, id numquam officiis itaque explicabo eum sunt perspiciatis, corporis nobis. Doloribus ea vel illo, saepe delectus atque hic non? Ex dolores officiis eius odio praesentium voluptate debitis et minima blanditiis dolore vitae suscipit enim dolor voluptatem ducimus saepe fugit molestiae animi autem, unde facilis nihil totam delectus? Quas ea, expedita veniam alias perferendis sequi, odio voluptatem, earum corporis suscipit nemo asperiores sint accusamus voluptatibus ratione facilis a. Necessitatibus deleniti expedita aut fugiat commodi beatae, natus amet aperiam eaque minima iusto doloremque corporis quam laudantium perferendis, nihil rem obcaecati nisi, fugit culpa ad illo in incidunt facilis? Beatae ducimus deleniti esse voluptate debitis voluptatum inventore voluptates quos fuga architecto adipisci quisquam itaque, libero numquam sint, molestiae aperiam reprehenderit repellat nostrum ab nemo! Eum autem ipsam ratione libero vitae quaerat facere reiciendis, quos corrupti odit omnis modi officiis suscipit a magni rem debitis minima hic dolorum. Vitae ipsum blanditiis sit reiciendis nemo excepturi magni temporibus iusto repellat fugiat molestias labore mollitia, provident iure, ex sunt earum laudantium consectetur, numquam quae commodi? Nostrum dignissimos voluptate molestiae quod explicabo labore hic ullam, perspiciatis consectetur odit blanditiis a natus, quas quisquam non eligendi quae et veritatis debitis? Est exercitationem quasi cumque facilis laborum, quisquam ipsa similique obcaecati eligendi unde quod ad! Error quo natus eius ipsum magni molestias temporibus, quasi esse ex iusto voluptas repudiandae quae voluptatum suscipit, nisi tempora dolor fugit velit consectetur. Facilis praesentium et impedit nulla id ratione aut soluta neque sit explicabo placeat tempore quam deleniti commodi, dolorum officiis reprehenderit! Ut nesciunt repellendus perferendis enim reiciendis facere accusantium a incidunt harum adipisci commodi voluptate suscipit possimus laborum, officiis cupiditate iste molestias velit dolorum modi? Perspiciatis nostrum at natus dignissimos dicta sint iure ab reprehenderit quasi beatae, eligendi atque aut magni. Dolorem illo aliquam voluptas natus officia dolorum sunt similique libero, cum eius quae ab. Dignissimos culpa praesentium aperiam in nobis numquam, aliquid rerum adipisci error impedit! Quas error facere necessitatibus repellendus, tempore optio aliquid pariatur quisquam laboriosam sit? Quas modi quisquam corrupti placeat eaque consequatur consequuntur dicta. Explicabo obcaecati reiciendis alias omnis ipsam pariatur? Placeat, nesciunt culpa eum illum asperiores velit minus sequi iusto accusantium vero eaque iste a, reiciendis optio delectus quis rem soluta aspernatur laudantium? Enim sed rerum maxime nemo accusamus animi pariatur temporibus reprehenderit accusantium quaerat aperiam labore sint vitae harum delectus a adipisci aliquid, architecto, quasi sunt, eligendi blanditiis. Laudantium obcaecati doloremque modi totam neque unde esse rerum, dignissimos laboriosam atque aliquam beatae exercitationem odit sunt nostrum recusandae earum iusto cumque ut distinctio at. Tenetur at voluptas, porro ratione perferendis suscipit neque ullam quos voluptatum, pariatur nostrum dicta velit asperiores atque, iusto vitae. Tempore dignissimos aliquid doloremque explicabo non! Nam, voluptatem nihil at quod atque itaque laudantium maxime, soluta suscipit illum dolorem cumque natus, expedita excepturi vel. Rem modi doloremque consequatur perspiciatis quae ipsum, cumque tenetur accusamus et sint ad sit, sunt, maiores facilis pariatur dolores! Similique magni fugit sapiente modi voluptas eos error quaerat ut quidem delectus expedita porro in quibusdam, amet doloribus non eum necessitatibus temporibus ratione fugiat dignissimos velit accusamus illum quia? Repudiandae possimus vitae sequi sit veritatis, eum assumenda error odit quia officia quisquam quis amet ipsam dolorum ipsum vel quos doloremque, autem fugiat fugit quasi optio maiores consequatur? Eum vero quo quis possimus numquam porro sint dolorum vel aliquid deleniti tempore iusto commodi amet, optio soluta, quaerat hic neque? Veniam laborum nobis distinctio adipisci quo aliquam, alias eum neque nostrum sunt eligendi iure molestias voluptates id, impedit vero illo? Totam iure, nostrum nulla illum error id labore dignissimos sapiente alias qui sint ipsum eaque mollitia autem laudantium sunt odio enim cum provident voluptatibus cupiditate consectetur maiores! Ullam et hic inventore magnam eum amet earum veritatis corrupti.
  </div>
  </div>

CodePudding user response：

Set Position Sticky for both one and two div

.one{
  width: 100%;
  background: red;
  height: 50px;
  position: sticky;
  top: 0;
}
.two{

  width: 100%;
  background: blue;
  height : 100px;
  position: sticky; 
  top:50px;

}
.three{
}