如何通过窗口在所有其他内容后面显示内容

在下面的代码段中，我有HTML和一个窗口，我有额外的内容。我已经将背景内容的位置设置为固定，但我不想看到标记窗口之外的内容(Hello World(。

如何将固定内容的内容设置为位于所有其他内容之后并且仅通过"；窗口">

注意：你必须全屏才能看到我试图保留在后台的内容

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 class="ad">
<div class="inner">
<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>

下面可能只是如何做到这一点的一个例子。

您必须拆分文章(或者更确切地说是其中的内容(，并将两个部分包装到各自的容器中。这里是.article-inner，给它以前在main的样式
使.ad背景透明，并添加与.article内部背景颜色相同的轮廓。此外，将广告块缩小轮廓厚度的两倍，并使用margin: 0 auto;将块居中

注意：我在主元素中添加了一个绿色背景，所以您可以看到您的.ad元素是一个实际的"；窗口"；

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 class="article-inner">
<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 class="ad">
<div class="inner">
<h2>Hello World</h2>
</div>
</div>    
<div class="article-inner">
<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>

我想首先说的是，您想要重新创建的效果可能是一种视差效果。我建议研究视差教程，以便能够始终如一地重现效果，并以经得起未来考验的方式实现它。

回答您关于如何在给定示例中实现效果的具体问题：

我们可以使用透明背景和z索引属性的组合来解决这个问题。我们希望将页面内容分层在固定项之上，这意味着固定项需要比内容少的z索引。此外，固定项不能是z索引较高的项的子项，否则它仍将显示在顶部。

然后我们将项目堆叠起来，但我们需要透视顶部的元素。我们可以通过在广告空间上使用透明背景，在其余内容上使用实心背景来实现这一点。我们不能在整个主元素上使用背景，否则广告空间将只显示它的容器。相反，我们可以为容器内的所有特定元素提供背景，然后跳过广告空间的背景。

我还去掉了一些空白，这样元素之间就不会有间隙。这将是flexbox布局管理间隙的一个很好的用例。

希望代码中的更改是有意义的，您可以在解决这个问题的路上！如果你有任何问题请告诉我✨

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 class="inner">
<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 class="ad"></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>

相关内容

最新更新

热门标签：