How to display content behind all other content through a window?-CodePudding

In the snippet below, I have HTML and a window which I have additional content. I've set the position of the background content to fixed, but I don't want to see the content (Hello World) outside of the marked window.

How do I set the content of the fixed content to be behind all other content and only visible through a "window"?

Note: You'll have to go full screen the see the content I'm trying to keep in the background.

main {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: lightblue;
}

img {
  max-width: 100%;
  height: auto;
}

.ad {
  background-color: white;
  height: 400px;
  border: 1px dashed red;
  position: relative;
}
.ad .inner {
  position: fixed;
  top: 500px;
}

<main>
  <header>
    <h2>I am a Title</h2>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
    </ul>
    <div >
      <div >
        <h2>Hello World</h2>
      </div>
    </div>    
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <img src="https://placekitten.com/1600/900" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
  </article>
</main>

CodePudding user response：

Below is probably just one example of many how it can be done.

You have to split your article (or rather the content inside) and wrap both parts into their own container. Here is .article-inner and give it the stylings that previously been at main
Make the .ad background transparent and add an outline in the same color as the .article-inner's background. Also, make that ad block smaller by two times the outline thickness and center the block with margin: 0 auto;

Note: I've added a green background to the main element, so you can see that your .ad element is an actual "window"

main {
  /* removed all stylings from here */
  background-color: green; // to see if you can see through the window
}

img {
  max-width: 100%;
  height: auto;
}

.article-inner {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: lightblue;
}

.ad {
  background-color: transparent;
  height: 400px;
  border: 1px dashed red;
  position: relative;
  outline: lightblue solid 16px;
  width: calc(100% - 32px);
  margin: 0 auto;
}
.ad .inner {
  position: fixed;
  top: 500px;
}

<main>
  <header>
    <h2>I am a Title</h2>
  </header>
  <article>
    <div >
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
    </ul>
    </div>
    <div >
      <div >
        <h2>Hello World</h2>
      </div>
    </div>    
    <div >
<p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <img src="https://placekitten.com/1600/900" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    </div>
  </article>
</main>

CodePudding user response：

I want to first say the effect you're looking to recreate is probably a type of parallax effect. I would recommend researching parallax tutorials be be able to recreate the effect consistently and implement it in a future proof type of way.

Answering your specific question on how to accomplish the effect in your given example:

We can solve this problem using a mix of transparent backgrounds and the z-index property. We want to layer the page content on top of the fixed item, which means the fixed item needs a z-index less than the content. Also, the fixed item can not be a child of the item with the higher z-index or it will still show up on top.

Then we have the items stacked, but we need to see through the element on top. We can do this by using a transparent background on the ad space and a solid background on the rest of the content. We can not use a background on the whole main element, or the ad space will only show it's container. We instead can give a background to all the specific elements inside the container, and then skip that background for the ad space.

Also I removed some margins so there aren't gaps between the elements. This would be a good use case for flexbox layout to manage gaps.

hopefully the changes in code make sense and you can be on your way to resolving this issue! Let me know if you have any questions ✨

main {
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  z-index: 2;
}

header, p, ul, header > h2 {
  background-color: lightblue;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.ad {
  background-color: transparent;
  height: 400px;
  border: 1px dashed red;
  position: relative;
}
.inner {
  position: fixed;
  top: 0;
  left: 50px;
  z-index: 1;
}

<div >
  <h2>Hello World</h2>
</div>

<main>
  <header>
    <h2>I am a Title</h2>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
    </ul>
    <div ></div>    
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
    <img src="https://placekitten.com/1600/900" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat repellendus similique placeat reprehenderit porro nisi ducimus beatae excepturi vero maxime magni quisquam numquam eum velit eveniet sapiente quis, itaque, unde nesciunt explicabo labore corporis voluptatem. Illo explicabo omnis ullam modi cumque quis libero illum, porro quos dolorem voluptatem provident.</p>
    <p>Tempore necessitatibus, impedit repellendus ut, mollitia reiciendis temporibus odit quasi corporis nam reprehenderit vel id veritatis! Voluptates animi corrupti magnam perferendis accusamus ea, rerum suscipit fuga. Molestias est illo nisi explicabo, minima ipsam magnam mollitia. Nihil, beatae eaque reprehenderit at possimus animi architecto quaerat nemo ratione quam impedit voluptas mollitia!</p>
    <p>Similique esse dolores, id laborum iure eius repudiandae quidem quasi, provident nulla excepturi, autem amet tenetur illo. Saepe, perspiciatis modi. Repudiandae sequi consectetur, cupiditate fugit totam repellat at enim. Aspernatur magnam eaque minus, distinctio molestias minima quod illo beatae commodi numquam aliquam! Rem cumque quia libero itaque accusantium, vel officiis!</p>
    <p>Iure, provident repellat autem laboriosam explicabo facilis. Quam id fuga commodi sint odit aliquid laborum iusto consequatur porro. A sunt illum quo incidunt aliquid quod illo nemo commodi, recusandae eligendi vel cum aliquam iusto quos. Voluptatem iste fuga nulla tempore eveniet recusandae nihil aliquid amet adipisci! Illum dolorem consequatur maxime.</p>
    <p>Rem pariatur libero veniam impedit nisi perferendis, fugiat minima quo quisquam, optio, totam error debitis eveniet. Perspiciatis quod beatae, ad aliquid alias cum, illum quos eius eum repellendus atque a molestiae reprehenderit. Quos eius suscipit illum doloribus assumenda voluptatum fugit corporis animi, mollitia laboriosam temporibus voluptatibus reprehenderit expedita veniam minima.</p>
  </article>
</main>