定位麻烦

Question

所以我在将一些内容放在我的英雄/ jumbotron图片下方时遇到了一些问题。 下划线的东西并不重要！它在负载时有一些jquery。代码如下：

JSFiddle

我想＆＃34;我们做什么＆＃34;在超大屏幕图像下面的内容

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

您可以从position: fixed;中删除.hero 并将其添加到CSS中，以折叠边距：

.wwd-main > h1
{
    margin: 0;
}

Answer 2

这将解决您的问题，但是当您的屏幕垂直变小时，您会发现底部的文字慢慢消失。这是因为您使用％来定义元素的尺寸，因为屏幕缩小框会相对于您的屏幕尺寸更小。要解决此问题，请将我用于.wwd-main的10％更改为90px。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 3

您已经两次定义了文本的高度和宽度。 这是代码的更改版本。 您现在可以自定义样式，使其看起来像您想要的那样。

PS：我建议您使用Bootstrap或任何其他库。

＆＃13;

＆＃13;

body {
	margin: 0;
	padding: 0;
}

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

.hero-text {
	position: fixed;
	width: 640px;
	height: 125px;	
	top: 20%;
	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: 20%;
    background-color: #eeeeee;
    z-index: 100;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFiddle Link