Question

我的问题是当我使用position fixed填充字段环境时，在移动设备中，位于goaloneimg div的第一个div落在位于goalontext的第二个div中。如何解决有关position fixed

的响应错误

HTML代码

＆＃13;

<div class="goals">
          <div class="row">
              <div class="col-md-6">
                  <div class="goalonetext">
                      <h1>What our goals?</h1>
                      <hr align="right" />
                      <p>Aliquam tempus lacinia quam sit amet</p>
                      <br/>
                      <p class="prightgoals">Aliquam tempus lacinia quam sit amet maximus. Donec tincidunt dui ut purus cursus lacinia.</p>
                  </div>
              </div>
              <div class="col-md-6">
                  <div class="goaloneimg">
                    <img src="http://www.infolab.es/wp-content/uploads/2015/10/work-and-coffee.jpg" />
                  </div>
              </div>
          </div>
      </div>

＆＃13;

CSS代码

.goals{
margin: 50px 0px 0px 0px;
}

.goals > .row{
    height: 300px;
}

.goaloneimg img{
    width: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 419px;
}

.goalonetext{
    background-color: #54b4e6;
    position: absolute;
    left: 0px;
    right: 0px;
    color: #FFFFFF;
    padding: 30px 30px 0px 30px;
    height: 419px;
    text-align: right;
}

Answer 1

一旦达到某个宽度，您将需要使用媒体查询来更改位置属性。例如，如果错误开始以600px发生，则需要添加此代码（您可以在媒体查询中调整宽度。

@media (max-width: 600px) {
  .goaloneimg img, .goalonetext {
    position:initial;
  }
}

在这里看到工作小提琴： https://jsfiddle.net/Nimral/uv8yrrav/9/

如何修复位置固定重叠错误？

1 个答案: