CSS定位问题 Bootstrap

Question

我正在使用带有来自 bootstrap 的标题文本的 slider 。我也在尝试将样式与我在下面添加的设计相匹配。但是我不能像设计所说的那样移动左边的标题部分。我使用了 CSS position 属性，但它不起作用。我想像设计一样将标题部分移动到图像的左侧。很抱歉，我不能将我的示例代码作为链接放在这里。

**要求是标题文字要随着图片滑动到正确的位置。

设计示例:

我创建的用于测试的示例代码:jsfiddle.net/px5khf89/3/embedded/result/

.body-area-one {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  behavior: url(/PIE.htc);
  margin-bottom: 15px;
  overflow: hidden;
}
/*body-area-one-left*/

.body-area-one-left,
.body-area-one-right {
  padding: 0;
}
.body-area-one-left {
  position: relative;
}
.body-area-one-left img {
  width: 100%;
}
.inner-part {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
  height: 100%;
  border-right: 1px dashed #ded4c9;
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
}
.inner-part .control-padd {
  padding: 8px;
}
.inner-part h3 {
  color: #7d7c78;
  font-size: 20px;
}
.inner-part p {
  color: #7d7c78;
  line-height: 1.5;
  margin: 0;
}
.inner-part a,
.footer-top .middle-bottom a,
.contact-area .contact-area-inner .textarea-right input[type="submit"] {
  background: url(../img/link-bg.png) no-repeat scroll 0 0 / cover;
  color: #fff;
  display: block;
  line-height: 18px;
  font-size: 14px;
  margin-top: 0;
  padding: 5px;
  text-align: center;
}
.inner-part a {
  float: right;
}
.body-area-one-left .carousel-inner {
  color: #959595;
  font-size: 20px;
}
/*body-area-one-right*/

.body-area-one-right .carousel-indicators {
  bottom: -10px;
}
.body-area-one-right .carousel-indicators li {
  background-color: #d2d2d2;
  border: none;
  border-radius: 10px;
  behavior: url(/PIE.htc);
  height: 15px;
  width: 15px;
  margin: 0 1px;
}
.body-area-one-right .carousel-indicators .active {
  background-color: #ADAEAD;
  height: 15px;
  margin: 0;
  width: 15px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section>
  <div class="container">
    <div class="custom-width">
      <div class="row">
        <div class="col-md-12">
          <div class="body-area-one">
            <div class="col-md-9 body-area-one-left">
              <img alt="gast" class="img-responsive" src="https://dl.dropboxusercontent.com/u/121936941/sh%20pic/gast.png">
            </div>
            <!-- end body-area-one-left-->
            <div class="col-md-3 body-area-one-right">
              <div class="carousel slide" data-ride="carousel" id="first-carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li class="active" data-slide-to="0" data-target="#first-carousel"></li>
                  <li data-slide-to="1" data-target="#first-carousel"></li>
                  <li data-slide-to="2" data-target="#first-carousel"></li>
                  <li data-slide-to="3" data-target="#first-carousel"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                  <div class="item active">
                    <div class="inner-part">
                      <div class="control-padd">
                        <h3>Kindercollectie</h3>

                        <p>Naast de reguliere kinderschoenen merken hebben we ook stoere en gave modellen van Nike , Cruyff en All Stars in ons assortiment voor diegene die niet alleen voor de pasvorm willen gaan maar die toch een goed passende vlotte schoen
                          willen hebben.
                        </p>
                      </div><a href="#">Bekijk Kindermodellen »</a>

                    </div>
                    <img alt="slider-img1" src="https://dl.dropboxusercontent.com/u/121936941/sh%20pic/slider-img1.png">
                  </div>
                  <div class="item">
                    <div class="inner-part">
                      <div class="control-padd">
                        <h3>Kindercollectie</h3>

                        <p>Naast de reguliere kinderschoenen merken hebben we ook stoere en gave modellen van Nike , Cruyff en All Stars in ons assortiment voor diegene die niet alleen voor de pasvorm willen gaan maar die toch een goed passende vlotte schoen
                          willen hebben.
                        </p>
                      </div><a href="#">Bekijk Kindermodellen »</a>

                    </div>
                    <img alt="slider-img1" src="https://dl.dropboxusercontent.com/u/121936941/sh%20pic/slider-img1.png">
                  </div>
                  <div class="item">
                    <div class="inner-part">
                      <div class="control-padd">
                        <h3>Kindercollectie</h3>

                        <p>Naast de reguliere kinderschoenen merken hebben we ook stoere en gave modellen van Nike , Cruyff en All Stars in ons assortiment voor diegene die niet alleen voor de pasvorm willen gaan maar die toch een goed passende vlotte schoen
                          willen hebben.
                        </p>
                      </div><a href="#">Bekijk Kindermodellen »</a>

                    </div>
                    <img alt="slider-img1" src="https://dl.dropboxusercontent.com/u/121936941/sh%20pic/slider-img1.png">
                  </div>
                  <div class="item">
                    <div class="inner-part">
                      <div class="control-padd">
                        <h3>Kindercollectie</h3>

                        <p>Naast de reguliere kinderschoenen merken hebben we ook stoere en gave modellen van Nike , Cruyff en All Stars in ons assortiment voor diegene die niet alleen voor de pasvorm willen gaan maar die toch een goed passende vlotte schoen
                          willen hebben.
                        </p>
                      </div><a href="#">Bekijk Kindermodellen »</a>

                    </div>
                    <img alt="slider-img1" src="https://dl.dropboxusercontent.com/u/121936941/sh%20pic/slider-img1.png">
                  </div>
                </div>
              </div>
              <!-- end body-area-one-right-->
            </div>
            <!-- end body-area-one-->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

在某种程度上已修复，尽管您必须对图像进行一些调整。

jsfiddle.net/px5khf89/9/