定位問題

因此，我在將一些內容放在我的英雄/ 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

回答

相關問題