文本框不会转到 Div 的底部。绝对位置不起作用
Text box will not go to bottom of Div. Position absolute doesn't work
您好,我正在尝试为我的网站创建视差滚动效果。它部分起作用。但是我试图将一个文本框定位在一个部分的底部,即#slide-2。出于某种原因……它只是停留在 Div 的顶部,而不是位于底部。我试过了
bottom:0;
和
position: absolute;
但是绝对位置使得视差效果不起作用。
#slide-2 .bcg {background-image:url("http://oilguru.org/wp-content/uploads/2012/06/Refinery-Sunset-Scenic-for-Oil-Guru-Recruitment-e1339505787369.jpg");
position: relative;
}
slide-2 .hsContent {
bottom: 0px;
position: relative;
}
slide-2 .hscontainer {
width: 100%;
height: 100%;
overflow: hidden;
position:relative;
}
#slide-2 h2 {
background-color: rgba(0,0,0,0.6);
bottom: 0;
/* top: 20%;*/
color: #ffffff;
font-size: 15px;
line-height: 20px;
}
html:
<section id="slide-2" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
>
<h2>Text box area
</h2>
</div>
</section>
首先需要设置幻灯片容器的高度:
#slide-2 .bcg {
background-image:url("http://oilguru.org/wp-content/uploads/2012/06/Refinery-Sunset-Scenic-for-Oil-Guru-Recruitment-e1339505787369.jpg");
position: relative;
height:300px;
}
然后对文本框区域使用绝对定位:
#slide-2 h2 {
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 15px;
line-height: 20px;
margin:0;
position:absolute;
bottom:0;
left:0;
right:0;
}
这是一个有效的 fiddle:http://jsfiddle.net/mpspwcku/
您好,我正在尝试为我的网站创建视差滚动效果。它部分起作用。但是我试图将一个文本框定位在一个部分的底部,即#slide-2。出于某种原因……它只是停留在 Div 的顶部,而不是位于底部。我试过了
bottom:0;
和
position: absolute;
但是绝对位置使得视差效果不起作用。
#slide-2 .bcg {background-image:url("http://oilguru.org/wp-content/uploads/2012/06/Refinery-Sunset-Scenic-for-Oil-Guru-Recruitment-e1339505787369.jpg");
position: relative;
}
slide-2 .hsContent {
bottom: 0px;
position: relative;
}
slide-2 .hscontainer {
width: 100%;
height: 100%;
overflow: hidden;
position:relative;
}
#slide-2 h2 {
background-color: rgba(0,0,0,0.6);
bottom: 0;
/* top: 20%;*/
color: #ffffff;
font-size: 15px;
line-height: 20px;
}
html:
<section id="slide-2" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
>
<h2>Text box area
</h2>
</div>
</section>
首先需要设置幻灯片容器的高度:
#slide-2 .bcg {
background-image:url("http://oilguru.org/wp-content/uploads/2012/06/Refinery-Sunset-Scenic-for-Oil-Guru-Recruitment-e1339505787369.jpg");
position: relative;
height:300px;
}
然后对文本框区域使用绝对定位:
#slide-2 h2 {
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 15px;
line-height: 20px;
margin:0;
position:absolute;
bottom:0;
left:0;
right:0;
}
这是一个有效的 fiddle:http://jsfiddle.net/mpspwcku/