如何在CSS

Question

我想重现此网站上滑块的效果：http://www.energeticthemes.com/templates/kaam/index.html

我想让它具有响应性，所以当它在平板电脑尺寸（sm on bootstrap）下时，它必须隐藏并仅保留图像。 我尝试用css制作一个带边框的广场：

.square-on-image{
border:solid 5px #fff;
width:300px;
height:350px;
}

在HTML上称它为div：

<div class="square-on-image"><img src="img/demoimg1.png" alt=""> DEMO </div>

但它不起作用，因为图像和文字不会越过广场，它们会进入它。 我尝试使用z-index，但这种类型的解决方案会破坏所有布局。 此外，我无法将方块放在滑块的中心。 我使用了滑动滑块，直到现在它从未在插入居中对象时遇到麻烦。

感谢@ jbutler483和@ imvain2我已经对代码进行了编辑：

CSS：

.bordered-image{
   position: relative;
   height: 600px;
   left: 20%;
   width: 60%;
   border: 20px solid #fff;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
   text-align: left;
}

.bordered-image img{
  position: absolute;
  top: 15%;
  width: 350px;
  height: 450px;
  left: 50%;
}

HTML：

<div class="banner-max-width">
 <div class="text-animation">
  <div class="hidden-sm"><div class="bordered-image">
    <img src="http://placehold.it/350x150"> 
     <div class="slide-title h2 light fixed" data-swiper-parallax="-800">DEMO TITLE</div>
       <div class="slide-description simple-article large light transparent" data-swiper-parallax="-400">DFSADFSDFSGFDFDSDGFBSBGBSDGFBSGDFB</div>
         <h2>A Movie in the Park:<br/>Kung Fu Panda</h2>
       </div>
     </div>
   </div>
  </div>
 </div>

它似乎有效，但现在有两个新问题：

我将图片和文字添加到第一个div中，因此＆＃34; <div class="hidden-sm">＆＃34;调整大小时隐藏每个对象。但是我希望只有正方形消失，给我一个上面有标题的模板和中心的图像。

我希望文字在左边对齐，就像图像一样（在广场上），但我无法做到。我认为这是一个CSS问题，因为它们保持在左边对齐但在广场内

Answer 1

这是一个工作样本。

.bordered-image{
  border:15px solid #000000;
  height:250px;
  }

.bordered-image img{
  position:absolute;
  right:12px;
  top:15%;
  }

<div class="hidden-sm"><div class="bordered-image"><img src="http://placehold.it/350x150"> DEMO</div></div>

Answer 2

您可以使用此定位。快速演示可以在下面看到，我在div包装器中设置了一个图像标签。

＆＃13;

＆＃13;

div {
  position: relative;
  height: 400px;
  width: 30%;
  border: 10px solid gray;
}
div img {
  position: absolute;
  top: 10%;
  width: 300px;
  left: 50%;
  height: 80%;
}

＆＃13;

<div>
  <img src="http://lorempixel.com/300/300" />
</div>

＆＃13;

＆＃13;

＆＃13;