seregazolotaryow64
@seregazolotaryow64
Аутист и веб-разработчик

Как убрать абсолютное вложение HTML-элементов в шапке сайта при прокрутке страницы?

Всем доброго вечера и всех с наступающим Новым 2019 Годом!
Мне нужно от вас очень много поддержки по такому поводу:
Делаю сайт для благотворительной организации. Осталось доделать основную часть сайта. Заказчик заметил одну глобальную ошибку-в разделе Новостей при его прокрутке изображение вкладывается в шапку, так как изображение вложено в соответствии с дизайн-концепцией. И посмотрите, что получилось:
5c2a1e73ad066779523745.png
Сам сайт реализуется на PHP+Yii1 и PHP-код блока новости:
<div class="news-page-feeds-info">
         <?php if($list['image']!=""){ ?>
          <?php echo CHtml::image($list['image'],"",array()); ?>
         <?php } else { ?>
           <?php echo CHtml::image("/media/images/news/unknown1.png","",array()); ?>
         <?php } ?>
          <div class="news-page-feeds-matherial-info">
              
              <div>
                 <h2><?php echo $list['title']; ?></h2>
              </div>
              <div>
                 
                 <div class="readmore"><span><?php echo CHtml::link(CHtml::image("/media/images/site/desktop/news/readmore.png","",array()),"/news/?view_id=". $list['id'],array()); ?></span></div>
              </div>
          </div>
       </div>

Я применил для шапки следующие строки CSS3-кода(практикуясь на кроссбраузерности):
header{
	width:100%;
	position:fixed;
	top:0;
}

header > .header-part{
        max-width:100%;
        height:85px;
        z-index:auto;
        background-color:#ffffff;
        background-size:cover;
	margin-top:-27px;
	opacity:0.65;
}

Для этого применил фиксированное позиционирование в основной части шапки.
А для новостного блока:
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info {
    display: block;
    width: 100%;
    height:490px;
    margin-top: 6mm;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info img {
    width: 118mm;
    margin-left: 5mm;
    margin-top: 14mm;
    position: absolute;
    left:0;
    height: 80mm;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info {
    float: left;
    background-image: url("/media/images/site/desktop/news/newsmatherialbg.png");
    width: 405mm;
    height: 105mm;
    background-repeat: no-repeat;
    background-size: 415mm 105mm;
    margin-left: 24mm;
    margin-top: 9px;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(1) {
    float: left;
    margin-left: 102mm;
    margin-top: 2mm;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(1) h2 {
    display: block;
    font-family: "Gulim Regular",sans-serif;
    font-size: 6mm;
    color: #ffffff;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-mas-matherial-info div:nth-child(1) span{
   display:block;
   overflow:hidden;
}

.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(2) {
    position:absolute;
    right:0;
    margin-right: -80mm;
    margin-top: 55mm;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(2) .readmore{
   display:block;
   width:60mm;
   height:15mm;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(2) .readmore:hover{
   cursor:pointer;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(2) .readmore span{
    margin-bottom:9mm;
    margin-right:18cm;
}
.news-page-feeds > .news-page-feeds-list .news-page-feeds-info .news-page-feeds-matherial-info div:nth-child(2) .readmore span a img{
  width:35%;
  height:70px;
}

Где .news-page-feeds-info-самый главный блок с новостью.
Через Яндекс не мог найти ответ на такие вопросы и задаю вам следующие вопросы:
  • Если изображение имеет абсолютное позиционирование, как сделать так, чтобы изображение не вкладывалось в шапку с фиксированным позиционированием?
  • Существуют ли CSS3-примеры для решения этой проблемы?

Заранее вам спасибо!
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы