位置：绝对div在另一个位置：绝对div中，并使它们处于位置：固定

Question

HTML

<div class="div1"></div>
<div class="div2">
  <div class="div3"></div>
</div>

CSS

Properties of div1,div2 and div3 are:

 div1. {
   position: absolute;
   z-index: 100;
   background-color: rgba(39, 39, 39, 0.3);
   height: 90px;
   width: 712px;
   left: 0px;
   bottom: 216px;
}

.div2 {
  position: relative;
}

.div3 {
  position: absolute;
  bottom: 263px;
  margin-left: 50px;
}

Now according to my concept is div1 is absolute and I should place div3 inside div1 by making it as absolute.Now my problem is I need to make div1 as position:fixed and it should be there if I scroll it but If I give like that the div 3 is not fixed and it is moving .Can I get the tricky point for this

Answer 1

Change position for both div1 and div3 to fixed and they will stay put when scrolling. There is also a minor typo in the CSS for div1 (the period is placed after instead of before "div1").

.div1 {
   position: fixed;
   z-index: 100;
   background-color: rgba(39, 39, 39, 0.3);
   height: 90px;
   width: 712px;
   left: 0px;
   bottom: 216px;
}

.div2 {
  position: relative;
}

.div3 {
  position: fixed;
  bottom: 263px;
  margin-left: 50px;
}