Make a div position fixed

↘锁芯ラ 提交于 2020-07-10 07:32:10

问题


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.


回答1:


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>


来源:https://stackoverflow.com/questions/62419621/make-a-div-position-fixed

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!