На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Абсолютный блок перекрывает другие блоки
    Добрый день!
    Сделал такую верстку:

    ExpandedWrap disabled
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html>
       
          <head>
              <title>Title!</title>
              <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
          </head>
       
          <body style="background:#ccc;margin:0;">
          
              <div id="wrapper" style="position:fixed;width:100%;height:100%;z-index:1;">
                  
                  <div id="scroller" style="position:absolute;display:block;width:90px;height:100%;background:#eee;text-align:center;padding:10px 0;cursor:pointer;opacity:0.7;" title="Наверх">Наверх</div>
                  
                  <div id="surface" style="width:900px;margin:0 auto;height:100%;">
                  
                      <div id="header" style="height:70px;background:#fff;"></div>
                      
                      <div id="separator" style="height:10px;background:#ccc;"></div>
                      
                      <div id="sidebar" style="width:200px;height:400px;background:#fff;float:left;"></div>
                  
                  </div>
       
              </div>
              
              <div id="page" style="width:900px;margin:0 auto;padding-top:80px;padding-left:210px;z-index:0;box-sizing:border-box;">
              
                  <div id="content" style="height:600px;background:#fff;margin-bottom:10px;"></div>
              
                  <div id="content" style="height:800px;background:#fff;margin-bottom:10px;"></div>
       
                  <div id="footer" style="text-align:center;padding:20px">Footer! 2015</div>
                  
              </div>
              
          </body>
       
      </html>


    Проблема в том, что при уменьшении размера окна браузера, блок "scroller" перекрывает блоки "header" и "sidebar". Почему так происходит и как это обойти?

    Результат на сриншоте.

    Прикреплённый файлПрикреплённый файл2015_10_23_193344.jpg (60,72 Кбайт, скачиваний: 839)

    Добавлено
    Черт! Плохая верстка! Блок page перекрывается блоком wrapper и не реагирует на нажатия по ссылкам... :wall:
    Сообщение отредактировано: AZote -
      а зачем heght:100%;?
        z-index?
          Всем спасибо за участие! Переделал верстку и добился всего, чего хотел.
          Причем сделал тремя разными способами. :D
          Прошу извинить за беспокойство.
          0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
          0 пользователей:


          Рейтинг@Mail.ru
          [ Script execution time: 0,0234 ]   [ 17 queries used ]   [ Generated: 29.03.24, 14:57 GMT ]