固定的 CSS 位置不会出现在移动设备上

Posted 2023-02-23

技术标签:

【中文标题】固定的 CSS 位置不会出现在移动设备上【英文标题】：CSS position fixed does not appear on mobile 【发布时间】：2017-08-28 01:06:45 【问题描述】：

我有一个类似这个 css 的元素：

element.style 
    background-image: url(image.jpg);

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;

我现在正试图使其成为一个固定位置，所以当我尝试执行以下操作时：

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 200px;

该元素不再出现在页面上。

有一个元素环绕着这个元素：

.twentyseventeen-panel 
    overflow: hidden;
    position: relative;

这里是html：

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

我的问题是，如何让带有背景图像的元素被修复。

这是一个示例网站：

http://www.grogenex.com/

【问题讨论】：

您想在移动设备中使用position: fixed 做什么？正在尝试在移动设备中保留视差外观？我想要移动端的视差效果 【参考方案1】：

这是另一种方法，它不使用“背景附件”或“位置：固定”。

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;

.twentyseventeen-panel 
    overflow: hidden;
    position: relative;
    height: 400px;

.panel-content 
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  overflow: auto !important;
  height: 100%;
  width: 100%;
  z-index: 1;

.panel-content > .wrap 
    position: relative;
    background: rgba(255,255,255,0.8);
    top: 200px;

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

【讨论】：

【参考方案2】：

如果我理解您的问题，您是否要这样做？

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 200px;
    z-index: -1;
    top: 0;
    left: 0

.twentyseventeen-panel 
    overflow: hidden;
    position: relative;

.panel-content 
  background-color: #fff;
  margin-top: 200px;
  padding: 0.1em 1.5em;

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

【讨论】：

图片仍然没有出现这个“元素”在你的 html 的哪一部分？我没找到。【参考方案3】：

只需简单地使用background-attachment: fixed;，这将在没有javascript 的情况下在移动设备上创建一个简单的视差效果，但只需确保它附加到移动设备上：

// make sure this is mobile width
@media screen and (max-width: 480px) 
  .panel-image 
    background-attachment: fixed;

你去吧。

【讨论】：

后台附件：已修复；不适用于 iPhone 7 background-attachment 根本不适用于移动 safari。 see related issue 除非你愿意在 JavaScript 解决方案中实现。【参考方案4】：

新答案：

如果您将 CSS 添加到图像中。它会创建您需要的视差效果！

background-attachment: fixed;
position: fixed !important;
object-fit: cover;
height:100%;

它应该被插入到image元素中。

<img src="http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis.jpg"    srcset="http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis.jpg 2000w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-300x180.jpg 300w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-768x461.jpg 768w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-1024x614.jpg 1024w" sizes="100vw" style="
    background-attachment: fixed;
    position: fixed !important;
    object-fit: cover;
    height:100%;
">

此外，如果您将其添加到 .panel-image，它也会为移动设备创建相同的视差！

.panel-image
    background-attachment: fixed !important;

如果这能解决您的问题，请告诉我！

旧答案：

在您在问题中提供的初始 CSS 中，图像已经修复。你想达到这样的目标吗？

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 200px;
    position:absolute;
    top:0px;


.twentyseventeen-panel 
    position: relative;

.entry-content
 margin-top:200px;

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong>&nbsp;$2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong>&nbsp;$4.50</p>
<p><strong>Cappuccino</strong>&nbsp;$4.50</p>
<p><strong>Macchiato</strong>&nbsp;$4.50</p>
<p><strong>Cortado</strong>&nbsp;$4.50</p>
<p><strong>Flat White</strong>&nbsp;$5.00</p>
<p><strong>Latte</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong>&nbsp;$4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong>&nbsp; </strong>$4.50</p>
<p><strong>Iced Tea&nbsp;&nbsp;</strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong>&nbsp;&nbsp;</strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong>&nbsp; </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
            </div><!-- .entry-content -->


        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article>

【讨论】：

对不起，我是想把那段代码拿出来，我不想使用背景附加 @user979331 所以你想完全删除杯子的图像？哇，这真的把一切都搞砸了 @user979331 如果您提供网页，它可以更快地解决。让我们continue this discussion in chat。【参考方案5】：

我相信您想要实现视差效果。不幸的是，应用 position:fixed 是无法实现的。就像其他人提到的那样， background-attachment:fixed 可能会有所帮助。

这里是实现纯css视差/半视差的好资源http://thetotobox.com/blog/easy-pure-css-parallax-effect-tutorial/

【讨论】：

【参考方案6】：

好吧，您要做的是让您的移动版本保留与桌面版本一样的视差效果，同时保持对跨浏览器支持的响应能力。可以通过将以下 CSS 属性添加到当前代码 background-attachment 来实现在移动设备上保持视差效果的能力。这将说明图像是否应该移动或保持在相对于视口的固定位置，或者当用户在您的网站上滚动时。不需要额外的代码。

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-attachment: fixed;

希望这对您的努力有所帮助。

【讨论】：

【参考方案7】：

background-attachment 属性设置是否为背景图片是固定的或与页面的其余部分一起滚动。

所以不要在代码中使用position: fixed;，而是使用background-attachment: fixed;...

.panel-image 
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 200px;

【讨论】：

以上是关于固定的 CSS 位置不会出现在移动设备上的主要内容，如果未能解决你的问题，请参考以下文章

背景：固定没有重复不能在移动设备上工作

为啥我的导航栏“位置：固定”显示在网页底部而不是移动设备的视口底部？

基于移动设备上点击位置的下拉列表弹出 CSS

原浅谈移动端开发--物理像素和逻辑像素