我如何有一个图像保持固定在页面上，但有一个文本覆盖移动

How do I have a image stay fixed on the page but have a text overlaid move?

本文关键字：有一个 文本 移动 覆盖 图像      更新时间：2023-09-26

所以我想弄清楚我如何去编码类似于这个网站的东西:http://www.nataliads.cl/以及如何让文本向下滚动一定长度，但没有图片移动。

如果你想保持文本或图像的浮动块在下面的图像，你可以使用css "position:fixed;"。

    .floating-block{
      position: fixed;
      top: 25%;
      right: 25%;
      width: 50%;
      border: 3px solid red;
      background-color:white;
    }

的例子:https://jsfiddle.net/NYCguyJason/vxcj31zj/

或者相反…(因为你的措辞有点混乱)如果你想让固定位置的图像不移动，而页面的其余部分滚动，试试这个例子:

https://jsfiddle.net/NYCguyJason/4n9ab0x6/1/

    .fixedBackground {
      width: 100%;
      position: fixed;
      top: 0;
    }

编辑编辑**根据您的新评论进行编辑**

根据你的评论，这里有一些额外的想法更接近你所描述的:

1。纯CSS: 设置"z-index"，使某些元素保持在其他元素的顶部。(最高的z指数保持在顶部。你必须将"position"设置为使用"z-index")

演示:https://jsfiddle.net/NYCguyJason/vxcj31zj/1/

.fullwidthblock {   /* this is the first background */
  position:relative;
  z-index:1;
}
.floating-block{  /* this is the floating block */
  position: fixed;
  z-index:2;
}
.stayOnTop{     /* this is for all blocks further down the page that should always stay on top*/
  position:relative;
  z-index:3;
}

?你的网站上有jquery吗?

2。自定义Javascript或Jquery:保持元素固定，直到你滚动到某一点，然后让它和你一起滚动。这里有一个答案:(但它似乎使用旧版本的jquery)在某一点停止固定位置滚动?

3。完整的Jquery插件:

粘包http://leafo.net/sticky-kit——看起来好

ScrolTo固定http://bigspotteddog.github.io/ScrollToFixed/——这看起来是你最好的选择，所以我更新了jsfiddle来显示这个选项:

https://jsfiddle.net/NYCguyJason/bn9ekcds/7/
<!-- grab jquery  -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- grab plugin script -->
<script type="text/javascript" src="https://cdn.rawgit.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed-min.js"></script>
<!-- trigger the plugin -->
<script type='text/javascript'>
$(window).load(function(){
$('.floating-block').scrollToFixed({
  marginTop: 80,  //how far from the top of the window to start
//  limit: $($('.stayOnTop')).offset().top
  limit: 550   //when to make the fixed element start scrolling up
});
});
</script>
相关文章：