固定 div 位置 [英] Make a div position fixed

查看：77
本文介绍了固定 div 位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在制作一个非常简单的应用程序，需要实现视差效果.

到目前为止我尝试过的东西，

-> 将图像放置在具有 parallax 类的 div 中.

-> 然后放置一个带有引导类 card item-card card-block 的覆盖 div，其中包含标题、图像和一些文本.

.parallax {宽度:100%；高度:250px；边界半径:0；}.item-card {弹性方向:列；box-sizing: 边框框；显示:弹性；地方内容:中心弹性开始；对齐项目:居中；边距:-24px 0 0;宽度:100%；填充:0；边框半径:18px；}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><div class="container mt-2"><div class="视差"><img style="width: 100%" src="https://www.w3schools.com/howto/img_parallax.jpg"/>

<div class="card item-card card-block"><h1 class="card-title text-center">这里有一些大文本作为标题</h1><div class="card-body"><img style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="日落照片">

<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5><p class="card-text">这是一家构建网站、网络应用程序和电子商务解决方案的公司.</p>

尝试将 position:fixed 应用到 parallax div，但这没有帮助.

图像 div 需要固定位置，然后下一个 div 卡需要滚动它.

将给定的图像更改为背景图像会使整个 div 不是响应式的.

解决方案

试试看

.parallax {背景图片:url("https://www.w3schools.com/howto/img_parallax.jpg");宽度:100%；高度:250px；边界半径:0；背景附件:固定；背景位置:中心；背景重复:不重复；背景尺寸:封面；}.item-card {弹性方向:列；box-sizing: 边框框；显示:弹性；地方内容:中心弹性开始；对齐项目:居中；边距:-24px 0 0;宽度:100%；填充:0；边框半径:18px；}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><div class="container mt-2"><div class="视差">

<div class="card item-card card-block"><h1 class="card-title text-center">这里有一些大文本作为标题</h1><div class="card-body"><img style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="日落照片">

<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5><p class="card-text">这是一家构建网站、网络应用程序和电子商务解决方案的公司.</p>

I am making a very simple application where there is a need to implement parallax effect.

Things I have tried as of now,

-> Placed an image inside a div with class parallax.

-> Then placed an overlay div with bootstrap class card item-card card-block with headline, image and some text inside it.

.parallax {
    width: 100%;
    height: 250px;
    border-radius: 0;
}

.item-card {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: center flex-start;
  align-items: center;
  margin: -24px 0 0;
  width: 100%;
  padding: 0;
  border-radius: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
  <div class="parallax">
      <img style="width: 100%" src="https://www.w3schools.com/howto/img_parallax.jpg" />
  </div>
  <div class="card item-card card-block">
       <h1 class="card-title text-center">Some big text here as headline</h1>
      <div class="card-body">
        <img  style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
  </div>
        <h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
        <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p> 
  </div>
 </div>

Tried applying position:fixed to parallax div but that doesn't help.

The image div needs to be position fixed and then the next div card needs to scroll over it.

Changing the given image to background image makes entire div as not a responsive one.

解决方案

Try it like this

.parallax {
    background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
    width: 100%;
    height: 250px;
    border-radius: 0;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.item-card {
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  place-content: center flex-start;
  align-items: center;
  margin: -24px 0 0;
  width: 100%;
  padding: 0;
  border-radius: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
  <div class="parallax">
  </div>
  <div class="card item-card card-block">
       <h1 class="card-title text-center">Some big text here as headline</h1>
      <div class="card-body">
        <img  style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
  </div>
        <h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
        <p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p> 
  </div>
 </div>

这篇关于固定 div 位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆