javascript - 定位麻烦

Question

所以我在将一些内容放在我的英雄/超大屏幕图像下方时遇到了一些问题。 下划线的东西不重要!它在加载时使用一些 jquery 进行了动画处理。 代码如下:

JSFiddle

我想在超大屏幕图片下方显示“我们做什么”的内容

HTML:

<div class="hero">
    <div class="hero-text">
        <h1 class="invis-selection">Header Text</h1>
        <div id="underline-1"></div>
        <div id="underline-2"></div>
        <div id="underline-3"></div>
        <div id="underline-4"></div>
    </div>
    <img class="hero-img" src="img/city-night.png" alt="Hero Image" />
</div>

<div class="wwd-main">
    <h1>What we do</h1>
</div>

CSS:

.hero{
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    font-family: 'Lato', sans-serif;
}

.hero-text {
    position: absolute;
    width: 640px;
    height: 125px;  
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.hero-text h1{
    position: absolute;
    width: 640px;
    height: 125px;  
    font-size: 7.1em;
    z-index: 1;
    margin-top: -15px;
}

.hero-img {
    width: 100%;
    height: 100%;
}

.wwd-main {
    position: relative;
    height: 30%;
    background-color: #eeeeee;
    z-index: 100;
}

Answer 1

这将解决您的问题，但是随着屏幕垂直变小，您会注意到底部的文本慢慢消失。这是因为您使用 % 来定义元素的尺寸，随着屏幕缩小，框相对于您的屏幕尺寸会更小。要解决这个问题，请将我用于 .wwd-main 的 10% 更改为 90px。

body {
	margin: 0;
	padding: 0;
}

.hero{
    position: fixed;
	width: 100%;
    height: 100%;
	text-align: center;
	color: #fff;
	font-family: 'Lato', sans-serif;
}

.hero-text {
	position: absolute;
	width: 640px;
	height: 125px;	
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.hero-text h1{
    position: absolute;
    width: 640px;
	height: 125px;	
	font-size: 7.1em;
	z-index: 1;
	margin-top: -15px;
}

.hero-img {
    width: 100%;
    height: 100%;
}

.wwd-main {
    position: fixed;
    bottom:0;
    width:100%;
    height: 10%;
    background-color: #eeeeee;
    z-index: 100;
}

<div class="hero">
  <div class="hero-text">
    <h1 class="invis-selection">Header Text</h1>
  </div>
	<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
    
<div class="wwd-main">
  <h1>What we do</h1>
</div>

编辑:我为解决这个问题所做的是将 .wwd-main 从 position:relative; 更改为 position:fixed; 并添加 bottom:0 ; 这确保文本将始终以 0px 偏移量固定在屏幕底部。