Зробити накладення Div на ЦІЛУ сторінку (а не лише область перегляду)?

95

Отже, у мене є проблема, яка, на мою думку, є досить поширеною, але я ще не знайшов хорошого рішення. Я хочу зробити накладений div, що охоплює ВСЮ сторінку ... НЕ лише область перегляду. Я не розумію, чому це так важко зробити ... Я спробував встановити висоту body, html на 100% тощо, але це не працює. Ось що я маю на сьогодні:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Я також був би відкритий для рішення в JavaScript, якщо воно існує, але я б скоріше використовував простий CSS.

html css

— Polaris878
джерело

Можна читати і ще тут: stackoverflow.com/questions/1938536 / ...

— Marco DeMaio

Чи можна це зробити по-справжньому за допомогою jQuery?

— Вільям Ентрікен

225

Важливе значення має область перегляду, але ви, мабуть, хочете, щоб весь веб-сайт залишався затемненим навіть під час прокрутки. Для цього потрібно використовувати position:fixedзамість position:absolute. Виправлено, буде зберігати елемент статичним на екрані під час прокрутки, створюючи враження, що все тіло затемнене.

Приклад: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

— Сампсон
джерело

3

Можливо, я помиляюся, але позиціоную фіксовану роботу в IE6 ?! Я знаю, напевно, більше ніхто не піклується про IE6.

— Марко Демайо,

29

@Marco Не впевнений. Чесно кажучи, якщо явно не вимагається підтримка браузера 10-річного віку, я більше не буду турбувати :)

— Семпсон,

5

То як ви, хлопці, робите це на мобільних пристроях? bradfrostweb.com/blog/mobile/fixed-position

— Борис Окунський

3

+1 Дякую! Я розширив ваш приклад, додавши спливаюче вікно над накладенням: jsbin.com/okabo3/740

— kol

проблема, з якою я стикаюся з цим (що використовується багатьма плагінами), полягає в тому, що коли ви клацаєте <select>елемент у iOS, він переміщує весь область перегляду і в основному ламає все. фіксовані елементи рухаються, речі, які не слід прокручувати, прокручувати тощо

— billynoah

16

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

— Нейт Барр
джерело

2

Найкраще можливе рішення. Ви просто перемикаєте "накладений" клас для тіла та застосовуєте наведений вище стиль до тіла із цим className.

— Святослав Заліщук

3

Поясніть, будь ласка, цю відповідь. Я не розумію коментаря Святослава.

— Lonnie Best

1

Перш за все, я думаю, ви неправильно зрозуміли, що таке область перегляду. Вікно перегляду - це область, яку браузер використовує для візуалізації веб-сторінок, і ви жодним чином не можете створити свої веб-сайти, щоб будь-яким чином замінити цю область.

По-друге, здається, що причина, що ваш overlay-div не охоплює весь область перегляду, полягає в тому, що вам потрібно видалити всі поля для BODY та HTML.

Спробуйте додати це у верхній частині таблиці стилів - воно скидає всі поля та відступи для всіх елементів. Полегшує подальший розвиток:

* { margin: 0; padding: 0; }

Редагувати: Я просто краще зрозумів ваше запитання. Position: fixed; можливо, у вас вийде, як писав Джонатан Семпсон.

— Арве Систад
джерело

1

Не слід видаляти заповнення та поля з усього . Повернути їх за багато елементів, таких як кнопки та входи форми, може бути дуже копітко.

— Семпсон,

1

На мій погляд, це просто дуже простий спосіб розглядати все більше як однакове в браузерах. Можливо, не застосовується сьогодні так сильно, як раніше, коли адаптувався до IE5, але я все ще роблю це як одне з перших, що я пишу в таблиці стилів.

— Арве Систад

3

@Arve Це наближає вас, але замість цього краще використовувати перевірений часом аркуш скидання. Перегляньте meyerweb.com/eric/tools/css/reset для отримання додаткової інформації - вам сподобається, запевняю вас :)

— Сампсон,

Я бачив це, і я просто думаю, що він занадто великий :)

— Арве Систад,

1

@Arve Скидання не такі вже й великі - спробуйте повністю відновитись, *{}і ви побачите набагато більше :)

— Семпсон

0

У мене було досить багато неприємностей, оскільки я не хотів ВИПРАВИТИ накладення на місці, оскільки я хотів, щоб інформація всередині накладеного тексту була прокручуваною по тексту. Я використав:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Звичайно, div в середині потребує певного вмісту і, мабуть, прозорого сірого фону, але я впевнений, ви зрозуміли суть!

— Бенджамін Воган
джерело

-6

Я подивився на відповідь Нейта Барра вище, яка, здавалося, сподобалась. Здається, це не сильно відрізняється від більш простого

html {background-color: grey}

— Джастін Манс
джерело