Question

嘿，我已经创建了一个jsfiddle来向您展示问题。我的文字与我的响应图像重叠。我希望他们坐在文本之上，而不是那样做。有人可以解决这个问题吗？

这是它破碎的小提琴

这是我对图像和问题的简要介绍：

    .page-header .logo img {
    position: absolute;
    border: 2px solid rgba(0, 0, 0, .3) !important;
    top: 45%;
    left: 35.5%;
    width: 30%;
    height: 30%;
    }

    .page-header h1 {
    margin: 30px 50px 10px;
    }

    .text-center {
    text-align: center;
    }

    .page-header h1 {
    margin: 30px 50px 10px;
    }

    h1 {
    margin: 0 0 30px;
    font-size: 54px;
    font-weight: 300;
    color: #555;
    }
    .page-header img {
    width: 100%;
    height: auto;
    }

    .page-header {
    position: relative;
    margin: -50px -50px 35px;
    padding: 0 0 35px;
    border-bottom: 1px solid #e6e6e6;
    }

Answer 1

说实话，你的代码很乱。我不确定你想要实现什么，但我会尝试解释我的能力。

您的徽标具有绝对位置，允许它位于滑块顶部，但由于它的位置和大小为％，因此很难防止它移动或增大尺寸。说了......你的徽标基本上有一个相对于容器大小的大小和位置，而容器<div class="logo">没有设置的宽度或高度，所以它的大小取决于它的容器，即页眉。并且它也没有设定的宽度或高度，所以它相对于身体。

您有多种解决方案。第一个也是最好的选择是清理代码并实际决定徽标或徽标容器的设置位置/大小。

第二种是注入一个新的div，它具有相对位置，但具有相同的徽标大小。这样，如果徽标的大小增加，新创建的不可见div也会增加并将内容向下推，这样徽标就不会重叠。

当然，请记住，因为您的徽标的位置是基于％（顶部：45％等），新创建的div将移动徽标，因为将增加正文的大小（所有内容的容器）。您的徽标也会因为％而被拉伸。

Answer 2

修改代码后，可能解决方法是：demo

＆＃13;

.page-header .logo {
position: absolute;
border: 2px solid rgba(0, 0, 0, .3) !important;
top: 20%;
left: 35.5%;
width: 30%;
z-index:99;
}
.page-header .logo img{
height:100%;
width:100%;
}

.page-header h1 {
margin: 30px 50px 10px;
}

.text-center {
text-align: center;
}

.page-header h1 {
margin: 30px 50px 10px;
}

h1 {
margin: 0 0 30px;
font-size: 54px;
font-weight: 300;
color: #555;
}
.page-header img {
width: 100%;
 height: 100%;
}

.page-header {
position: relative;
margin: -50px -50px 35px;
padding: 0 0 35px;
border-bottom: 1px solid #e6e6e6;
}

＆＃13;

<div class='page-header'>
			
            <div class='carousel' id='portfolio-carousel'>
				<div class='logo'>
              <img alt="Profile default" src="http://placehold.it/210x199" />
            </div>
              <img alt="Store background" src="http://placehold.it/700X394" />
            </div>
            
            <!-- end carousel -->
            <div class='row'>
              <div class='col-lg-12'>
                <div class='text-center'>
                  <br>
                  <h1>
                    lkj
                  </h1>
                  <p class='lead'>
                    alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkjser alkj
                  </p>
                </div>
              </div>
            </div>
          </div>

＆＃13;

我的响应式图像与我的标题重叠。

2 个答案: