2016-05-26 24 views
0

イメージのテキストに問題があります(インラインJSエレメント)。それは私が画像の上に表示したいカウントダウンタイマーです。画像はスクリーンウィンドウサイズにも固定されています。イメージのテキストが「位置固定」で動作しない

コードはここにある:https://jsfiddle.net/Lo7soz5f/

私は「位置:固定」を削除しない場合はそれが動作#forsidedivからが、その後、画像がもはやウィンドウサイズに装着されています。しかし、私がそれを元に戻すと、タイマーはもはや画像の上に表示されません。

HTML:

<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 
<title>onepageskiw</title> 
<link href="styles.css" rel="stylesheet" type="text/css"> 
<script src="js.js"></script> 
</head> 

<body> 

<div id="countdowner"> 
    <div id="countdown"></div> 
    <div id="newcountdown"></div> 
</div> 

<div id="forsidediv"> 
    <img id="forsidepic" src="https://images.unsplash.com/14/unsplash_524000a90aaad_1.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=dc7275b6369c623d975484143fbb6a17"> 
</div> 

スクリプト:

<script> 
    CountDownTimer('02/19/2017 10:1 AM', 'countdown'); 
    CountDownTimer('02/20/2017 10:1 AM', 'newcountdown'); 

    function CountDownTimer(dt, id) { 
    var end = new Date(dt); 

    var _second = 1000; 
    var _minute = _second * 60; 
    var _hour = _minute * 60; 
    var _day = _hour * 24; 
    var timer; 

    function showRemaining() { 
     var now = new Date(); 
     var distance = end - now; 
     if (distance < 0) { 

     clearInterval(timer); 
     document.getElementById(id).innerHTML = 'EXPIRED!'; 

     return; 
     } 
     var days = Math.floor(distance/_day); 
     var hours = Math.floor((distance % _day)/_hour); 
     var minutes = Math.floor((distance % _hour)/_minute); 
     var seconds = Math.floor((distance % _minute)/_second); 

     document.getElementById(id).innerHTML = days + 'days '; 
     document.getElementById(id).innerHTML += hours + 'hrs '; 
     document.getElementById(id).innerHTML += minutes + 'mins '; 
     document.getElementById(id).innerHTML += seconds + 'secs'; 
    } 

    timer = setInterval(showRemaining, 1000); 
    } 

</script> 

CSS:

@charset "utf-8"; 

body { 
margin:0; 
} 

#countdowner { 
color:white; 
padding:1em; 
position:absolute; 

} 

#forsidediv { 
position:fixed; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
text-align: center; 
} 

#forsidepic { 
width: 100%; 
} 

答えて

0
私が正しく理解していれば

は: https://jsfiddle.net/Lo7soz5f/4/ ちょうどあなたのdivの順序変更:

<div id="forsidediv"> 
    <img id="forsidepic" src="https://images.unsplash.com/14/unsplash_524000a90aaad_1.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=dc7275b6369c623d975484143fbb6a17"> 
</div> 

<div id="countdowner"> 
    <div id="countdown"></div> 
    <div id="newcountdown"></div> 
</div> 
+0

それはうまくいっていました。ありがとう。 :) –

0

をカウントダウンが表示されますが、それは画像の後ろになります。 z-indexの値を変更して、フォアグラウンドで表示することができます。

セット内z-index両方#countdowner#forsidedivが、最初に高い値を設定します。

+0

ありがとう、また働いた。 :) –

+0

よろしくお願いします –

関連する問題