定位问题

因此，我在将一些内容放在我的英雄/ jumbotron图像下方时遇到了一些问题。 下划线的东西并不重要！这是对一些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; 
}

来源

2017-02-18 Matt.Owen

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

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

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

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

 
.hero-text h1{ 
 
    position: absolute; 
 
    width: 640px; 
 
\t height: 125px; \t 
 
\t font-size: 7.1em; 
 
\t z-index: 1; 
 
\t 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> 
 
\t <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，主要从position:relative;到position:fixed;并添加bottom:0;这确保文本将始终固定在屏幕的底部，一个0px的偏移量。

来源

2017-02-18 03:07:08 Inkdot

你可以请从.hero删除position: fixed;。
这添加到您的CSS，崩溃边缘：

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

来源

2017-02-18 02:59:53 user6003859

这项工作。有点，它现在不是一个完整的jumbotron图像。在jumbotron底部有大约15px的空白空间 –

编辑我的答案。现在应该工作。 – user6003859

您已经定义了文本的高度和宽度两次。以下是代码的更改版本。现在，您可以自定义样式，使其看起来像您想要的样子。 PS：我建议你使用Bootstrap或任何其他库。

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

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

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

 
.hero-text h1{ 
 
    position: absolute; 
 
    width: 640px; 
 
\t height: 125px; \t 
 
\t font-size: 7.1em; 
 
\t z-index: 1; 
 
\t 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> 
 
\t <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>

JSFiddle Link

来源

2017-02-18 04:57:16

回答

相关问题