1
ページに異なるセクションがあります。私はこれらのセクションの下で画像を修正しました。私は最後のセクションで大きなマージンを持っているので、ユーザーがスクロールしているときに画像が表示され、3次元の効果が得られます。問題は私の#vanishing-text-container divが画像上に表示されないことです。画像よりも高いz-indexを1つ追加した理由は分かりません。固定画像が別の部門と重複しています
私の#vanishing-text-container divが画像に表示されない理由は誰にも見えますか？
#safety-boxes, #scrolling-content, #safety-content {
\t width: 100%;
}
/*---Safety Boxes----*/
#safety-boxes {
\t /*height: 400px;*/
\t height: 50%;
\t position: relative;
\t z-index: 2;
}
#safety-box-large, .safety-box-small {
\t vertical-align: top;
}
#safety-box-large {
\t width: 50%;
\t height: 100%;
\t display: inline-block;
\t background: #FF2F2F;
}
.safety-box-small {
\t width: 25%;
\t height: 100%;
\t display: inline-block;
}
#safety-box2 {
\t background: #3e745b;
}
#safety-box3 {
\t background: #6f9697;
}
.safety-box-icon {
\t height: 150px;
\t width: 150px;
\t display: block;
\t margin: 0 auto;
\t padding: 80px 0 60px 0;
}
.safety-box-title {
\t color: #FFF;
\t font-size: 2.5em;
\t font-family: 'open_sanslight', "Droid Sans", sans-serif;
\t text-align: center;
\t line-height: 1.4em;
\t padding: 5px 8px;
}
/*----Vanishing Text ---*/
#vanishing-text-container {
\t width: 100%;
\t height: 50%;
\t background: #FFF;
\t z-index: 1;
}
#vanishing-text {
\t position: relative;
\t padding-top: 150px;
\t font-size: 3em;
\t line-height: 1.4em;
\t text-align: center;
}
/*---Scrolling Section---*/
#scrolling-content {
position: fixed;
top: 0;
\t left: 0;
/* background: green;*/
\t height: 400px;
}
#scrolling-content-container {
\t padding-top: 150px;
\t width: 100%;
}
#safety-main-img {
\t width: 100%;
\t height: auto;
}
#scrolling-content-description {
\t text-align: center;
\t /*position: absolute;
\t top: 80%;
\t left: 50%;
\t -webkit-transform: translate(-50%, -50%);
\t transform: translate(-50%, -50%);*/
\t font-size: 3em;
\t line-height: 1.4em;
\t color: #FFF;
}
/*---Safety Content ---*/
#safety-content {
\t margin-top: 300px;
\t background: #EDEDED;
\t height: 500px;
\t position: relative;
\t z-index: 2;
}
#safety-content-container {
\t padding: 100px 15%;
}
#safety-content-description {
\t font-size: 1.5em
\t line-height: 1.4em;
}<div id="safety-boxes">
\t \t \t <div id="safety-box-large">
\t \t \t \t <img src="images/safety/head-protection.png" class="safety-box-icon" alt="Demolition and Wrecking Safety">
\t \t \t \t <div class="safety-box-title">Safety is a top priority</div>
\t \t \t </div><div class="safety-box-small" id="safety-box2">
\t \t \t \t <img src="images/safety/shield.png" class="safety-box-icon" alt="The Eslich Wrecking Company Safety">
\t \t \t \t <div class="safety-box-title">Safety Training</div>
\t \t \t </div><div class="safety-box-small" id="safety-box3">
\t \t \t \t <img src="images/safety/wrench.png" class="safety-box-icon" alt="Demolition and Wrecking Company Safety">
\t \t \t \t <div class="safety-box-title">Right tools for the job</div>
\t \t \t </div>
\t \t </div>
\t \t <div id="vanishing-text-container">
\t \t \t <div id="vanishing-text">THE COMPANY PUTS SAFETY FIRST</div>
\t \t </div>
\t \t <div id="scrolling-content">
\t \t \t <div id="scrolling-content-container">
\t \t \t \t <!-- <div id="scrolling-content-description">WE CARE ABOUT THE SAFETY AND WELL BEING OF ALL LIVES</div> -->
\t \t \t \t <img src="http://optimumwebdesigns.com/eslich/images/safety/safety-main.jpg" alt="The Eslich Wrecking Company Promotes Safety Demolition" id="safety-main-img">
\t \t \t </div>
\t \t </div>
\t \t <div id="safety-content">
\t \t \t <div id="safety-content-container">
\t \t \t \t <div id="safety-content-description">Safety</div>
\t \t \t </div> \t
\t \t </div>
あなたのイメージはスクロールコンテンツのdivにあります – Keith
@Keith私のお詫び申し上げます、間違ったdiv名を入力しました。このdivの「消失テキストコンテナ」は、スクロールしているコンテンツdivを上書きする必要があります。私は私の質問を更新しました。 – Becky