使偏移，绝对像素位置图像网格响应＆amp;按顺序

Question

我希望有人可以提供帮助。我有一个偏移图像网格（下面的链接），它们都绝对位于外部div中。

http://hughjan.us/stack-demo/stack-demo.html

目前所有图像都是他们需要的尺寸，这对于填充任何尺寸的屏幕都无济于事。因此，这个网格需要响应，与浏览器一起扩展并垂直堆叠，一个在另一个之下。按照数字的顺序，在较小的屏幕尺寸上。 我很欣赏这可能是两个问题;响应＆amp;按一定顺序堆叠。如果它有帮助我会分开它。

/* home page image styles */

#home-outer {
  margin: 0 auto;
  position: relative;
  width: 1024px;
  height: 779px;
}

#demo-our-work_ {
  position: absolute;
  left: 446px;
  top: 0px;
  width: 410px;
  height: 229px;
  background-color: #000000;
}

#demo-our-work_:hover .homeoverlay {
  width: 100%;
}

#demo-check-availability_ {
  position: absolute;
  left: 219px;
  top: 51px;
  width: 216px;
  height: 178px;
  background-color: #000000;
}

#demo-check-availability_:hover .homeoverlay {
  width: 100%;
}

#demo-voiceovers_ {
  position: absolute;
  left: 0px;
  top: 239px;
  width: 376px;
  height: 241px;
  background-color: #000000;
}

#demo-voiceovers_:hover .homeoverlay {
  width: 100%;
}

#demo-logo_ {
  position: absolute;
  left: 378px;
  top: 244px;
  width: 268px;
  height: 241px;
}

#demo-voicereels_ {
  position: absolute;
  left: 649px;
  top: 239px;
  width: 375px;
  height: 263px;
  background-color: #000000;
}

#demo-voicereels_:hover .homeoverlay {
  width: 100%;
}

#demo-about_ {
  position: absolute;
  left: 101px;
  top: 491px;
  width: 348px;
  height: 153px;
}

#demo-about_:hover .homeoverlay {
  width: 100%;
}

#demo-our-history_ {
  position: absolute;
  left: 458px;
  top: 491px;
  width: 181px;
  height: 288px;
  background-color: #000000;
}

#demo-our-history_:hover .homeoverlay {
  width: 100%;
}

#demo-studios_ {
  position: absolute;
  left: 649px;
  top: 512px;
  width: 320px;
  height: 222px;
  background-color: #000000;
}

#demo-studios_:hover .homeoverlay {
  width: 100%;
}

#demo-additional-services_ {
  position: absolute;
  left: 274px;
  top: 653px;
  width: 175px;
  height: 113px;
  background-color: #000000;
}

#demo-additional-services_:hover .homeoverlay {
  width: 100%;
}


/*homepage roll over styles */

.homeoverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .8s ease;
  z-index: 9999;
}

.homeoverlay span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /* fixes overlap error in IE7/8, 
         make sure you have an empty gif */
  background-image: url('empty.gif');
}

.hometext {
  white-space: nowrap;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.hometext a {
  color: white;
  text-transform: uppercase;
  font-size: 20px;
}


/*end home page roll over styles */


/* rollover for about text */

.about-text-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#demo-about_:hover .about-text-layer {
  visibility: visible;
  opacity: 1;
}

.about-text {
  transition: .9s;
  transform: translateX(-100%);
  padding: 0 20px;
  font-size: 14px;
}

#demo-about_:hover .about-text {
  transform: translateX(0);
}


/* end rolloever for about text */


/* end home page image styles */


/*main rollover styles */

.rollover-container {
  position: relative;
  max-width: 300px;
  max-height: 300px;
  display: inline-block;
  margin: 0 0 5px 0;
}

.rolloverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .8s ease;
}

.rollover-container:hover .rolloverlay {
  width: 100%;
}

.rollover-text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-transform: uppercase;
}

<div id="home-outer">

  <div id="demo-our-work_">
    <img id="demo-check-availability" src="http://hughjan.us/stack-demo/image6.jpg" border="0" alt="demo Check Availability" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/our-work/"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/our-work/">Our Work</a></div>
    </div>
  </div>
  <div id="demo-check-availability_">
    <img id="demo-check-availability" src="http://hughjan.us/stack-demo/image8.jpg" border="0" alt="demo Check Availability" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/check-availability/"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/check-availability/">Check Availability</a></div>
    </div>
  </div>
  <div id="demo-voiceovers_">
    <img id="demo-voiceovers" src="http://hughjan.us/stack-demo/image2.jpg" border="0" alt="demo" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/#/"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/#/">Link 2</a></div>
    </div>
  </div>
  <div id="demo-logo_">
    <img id="demo_logo" src="http://hughjan.us/stack-demo/image1.jpg" width="268" height="241" alt="" />
  </div>
  <div id="demo-voicereels_">
    <img id="demo-voicereels" src="http://hughjan.us/stack-demo/image3.jpg" border="0" alt="demo - link 3" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/#"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/#">Link 3</a></div>
    </div>
  </div>
  <div id="demo-about_">
    <img id="demo-about" src="http://hughjan.us/stack-demo/image7.jpg" alt="demo - About" />
    <div class="about-text-layer">
      <p class="about-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim. </p>
    </div>
  </div>
  <div id="demo-our-history_">
    <img id="demo-our-history" src="http://hughjan.us/stack-demo/image5.jpg" border="0" alt="demo - Our History" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/our-history/"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/our-history/">Our History</a></div>
    </div>
  </div>
  <div id="demo-studios_">
    <img id="demo-studios" src="http://hughjan.us/stack-demo/image4.jpg" border="0" alt="demo - link 4" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/studios/"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/#/">Link 4</a></div>
    </div>
  </div>
  <div id="demo-additional-services_">
    <img id="demo-additional-services" src="http://hughjan.us/stack-demo/image9.jpg" border="0" alt="demo - Additional Services" />
    <div class="homeoverlay"><a href="http://hughjan.us/stack-demo/additional-services/"><span></span></a>
      <div class="hometext"><a href="http://hughjan.us/stack-demo/additional-services/">Additional<br>Services</a></div>
    </div>
  </div>
</div>

我不确定这种定位方式是否适合这种布局？我的css技能有限，我不敢说。我需要使整个布局在更大的尺寸上可能有80％的居中宽度，但是对于较小的屏幕，按照编号顺序堆叠图像。 我知道媒体查询较小的屏幕尺寸和'显示：内联;最小宽度会使图像彼此低于下方，但允许我排列这些图像的绝对定位会给我带来问题。

我意识到写作时我并不擅长描述这一点，但我希望这是可以理解的。 感激不尽的任何帮助