定位故障
定位故障
提问于 2017-02-18 02:50:26
所以我对把一些内容放在我的英雄/巨无霸形象下面有一些问题。下划线的东西并不重要！它在加载时使用了一些jquery.代码，如下所示：
我想要“我们做什么”内容在巨无霸图像下面
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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2017-02-18 03:07:08
这将解决你的问题，然而，当你的屏幕垂直变小，你会注意到在底部的文字慢慢消失。这是因为您使用%s来定义元素的尺寸，因为屏幕缩小了，相对于屏幕大小，框将变小。要解决这个问题，请将我用于..wwd main的10%更改为90 10。
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>
编辑:我为解决这个问题所做的是将. was从position:relative;更改为position:fixed;，并添加了bottom:0;，这确保了文本总是用0 0px偏移量固定在屏幕底部。
Stack Overflow用户
发布于 2017-02-18 02:59:53
您可以将position: fixed;从.hero中删除。
并将其添加到CSS中，以缩小页边距：
.wwd-main > h1
{
margin: 0;
}Stack Overflow用户
发布于 2017-02-18 04:57:16
您已经两次定义了文本的高度和宽度。下面是代码的更改版本。您现在可以自定义您的样式，以使它看起来像您想要的方式。
PS:我建议您使用Bootstrap或任何其他库。
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;
}<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42310533
复制相关文章
相似问题
腾讯云开发者
