Jquery 滑块未对齐中心，段落显示与段落重叠

我正致力于引导框架，使我的网站。我已经创建了一个具有id=flip_pix的滑块，下一个是段落div。在滑块中有3张图片。我面临的问题是滑块下方的段落重叠。我希望段落div显示在另一个滑块div的正下方。我希望这是响应性的

另一个我想让滑块对齐父div的中间

HTML:

你想从我这里得到什么
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
功能图

CSS:

#翻转{
保证金：0自动；
位置：相对位置；
}
#翻盖皮克斯分区{
位置：绝对位置；
z指数：0；
}
#上一页{
z指数：1；
}
#翻转pix分区激活{
z指数：2；
}

这是屏幕截图：

---

你应该在你的

#flip_pix

样式定义中添加

高度：…px

，因为它的孩子们有

位置：绝对的
，它不知道应该是什么高度。
是的，我添加了250px高度，但这没有响应性。。滑块和段落div之间的间距增大。您可以尝试将
位置：相对
添加到
#flip_pix div.active
并删除
高度：…px
，我建议您。这可能会有帮助。当我使用相对位置滑块时，图像会垂直显示。。。它们实际上不是按z-指数堆叠的。您是否仅在
活动
元素上使用它？所有其他div应为
位置：绝对值
。
<div class="panel-body">
     <div class="page-header">
          <h3>What you want <small> from me</small></h3>
     </div>
     <div id="flip_pix">
         <div class="active">
              <img src="img/slider-1.jpg" class="feature-img" alt="" width="100%"/>
         </div>
         <div>
              <img src="img/slider-2.jpg" class="feature-img" alt="" width="100%"/>
         </div>
         <div>
               <img src="img/slider-3.jpg" class="feature-img" alt="" width="100%"/>
         </div>
     </div>
     <div>
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>featureImg
     </div>
</div>

<style>
        #flip_pix{
            margin: 0 auto;
            position: relative;
        }
        #flip_pix div{
            position: absolute; 
            z-index: 0;
        }
        #flip_pix div.prev{
            z-index: 1;
        }
        #flip_pix div.active{
            z-index: 2;
        }
    </style>