当我将图像定位为“固定”时，它会消失吗？我希望它位于 div 中另一个图像的顶部？答案

【问题标题】：When I position an image to "fixed" it disappears? I want it to be positioned on top of another image within a div?当我将图像定位为“固定”时，它会消失吗？我希望它位于 div 中另一个图像的顶部？
【发布时间】：2017-02-06 05:38:28
【问题描述】：

HTML：（我正在谈论的部分是带有坠落和悬崖 png 的最后一个 div。我希望坠落的 png 仅出现在该 div 中并位于悬崖 png 的顶部。但是它只是消失了。我不确定我在做什么哈哈

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<link rel="stylesheet" href="css/map_site00.css" />

<style>
body, html {
  height: 100%;
  margin: 0;
  font: 400 13px/1.8 "Lato", sans-serif;
  color: #a3000d;
  background: black;
}


.bg img {
  width: 100%;
}


.bg {
  position: relative;
  opacity: 0.95;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#bgimg-1 {
  background-image: url("images/img_parallax.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("images/drought.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("images/story.jpg");
  min-height: 400px;
}

.bgimg-4 {
  background-image: url("images/missing1.gif");
  min-height: 100%;
}

.bgimg-5 {
  background-image: url("images/img_parallax.jpg");
  min-height: 100%;
}

.bgimg-6 {
   background-image: url("images/smokeysays.jpg");
   min-height: 100%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

p {
  font: 25px "Lato", sans-serif;;

}

h1 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 35px "Lato", sans-serif;
  color: #fff;
  -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
    text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #fff;
}


/* SOLVES IMAGE SIZE PROBLEM in POPUPS */

/*Use !important to Override any other CSS rules that may be affecting an element..."A rule that has the !important property will always be applied no matter where that rule appears in the CSS document"*/
.leaflet-popup-content {
    width:auto !important;
}

/*A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element*/



.leaflet-popup-tip {
    width: 0px;
    height: 0px;
  }*/

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bg {
        background-attachment: scroll;
    }
}



</style>

</head>
<body>

<div style="color: #fff;background-image:url(images/smoke.gif);text-align:center;padding:0px 0px; height: 100%; width: auto; text-align: justify; margin-top:-45px">
<center><p style="color: #aa0000;  text-transform: uppercase;font-size: 3.5em;  -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
    text-shadow:
   -.5px -.5px 0 #000,  
    .5px -.5px 0 #000,
    -.5px .5px 0 #000,
     .5px .5px 0 #000;">Story from the Ashes</p></center>
  <center><p style="color: #fff;  text-transform: uppercase; font-size: 2.0em;   -webkit-text-stroke-width: 1.5px;
   -webkit-text-stroke-color: black;
    text-shadow:
  -.5px -.5px 0 #000,  
    .5px -.5px 0 #000,
    -.5px .5px 0 #000,
     .5px .5px 0 #000;">Three years ago a strange series of disappearances from Western North Carolina occurred promoting surrounding authorities to search the area for the missing individuals. The disappearances took place over a period of about 6 months and beginning with a young women who went missing during a hiking trip with her best friend in Nantahala National Forest. </p></center>
  <center><img src="images/arrow.png"></img></center>
</div>

<div class="bgimg-4 bg">
  <div class="caption">
      <h1 style="text-align:center;">Images found on missing woman's social media hours before dissapearance along side a news segment</h1>
     </div>
   </div>
</div>



<div class="bgimg-3 bg" style="height: 100%; position: relative">
<img src="images/falling.png" style=" z-index:2; height: 150px; width: 150px; left: 65%; position: fixed"></img>
    <img src="images/cliff.png" style="height: 70%; width: 50%; margin-top: 26%; margin-left: 50%"></img>
   </div>

【问题讨论】：

标签： html css position z-index fixed

【解决方案1】：

如果你能提供一个小提琴，那就太好了，但是你现在应该做一些事情。
首先，如果您不再使用<center> 标签会更好，它已在 HTML5 上离开。改用 CSS。
第二件事，可能是您的问题，当您使用position: fixed; 时，CSS 根据您提供的属性（例如 top 和 left）从屏幕左上角修复元素。所以要小心，如果你想在 div 中使用它，最好使用位置 relative 或 absolute 。

【讨论】：