1
У меня разные разделы на странице. Затем у меня есть изображение, закрепленное в этих разделах. Затем у меня большой запас по моему последнему разделу, поэтому, когда пользователь прокручивается вниз, они будут видеть изображение, и это придаст ему вид 3D-эффекта. Моя проблема в том, что мой #vanishing-text-container div не отображается на изображении. Я не уверен, почему, поскольку я добавил z-index из 1, что выше изображения.Фиксированное изображение, перекрывающее другой div
Кто-нибудь видит, почему мой #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 'vanishing-text-container' должен пройти через прокручивающийся контент div. Я обновил свой вопрос. – Becky