图像上的文字不适用于“固定位置”答案

【问题标题】：Text on image not working with "position fixed"图像上的文字不适用于“固定位置”
【发布时间】：2016-09-24 02:30:55
【问题描述】：

我对图像上的文本（内联 JS 元素）有一些问题。这是一个倒数计时器，我想在图像上显示。图像也固定为屏幕窗口大小。

如果我从#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%;
}

【问题讨论】：

标签： javascript position inline fixed absolute

【解决方案1】：

如果我理解正确： 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>

【讨论】：

那行得通，当它们彼此“在上面”时，不知道 div 顺序是相对的。谢谢。 :)

【解决方案2】：

倒计时出现，但它在图像后面。您可以通过更改 z-index 值将其置于前台。

在 #countdowner 和 #forsidediv 中设置z-index，但在第一个上设置更高的值。

【讨论】：