สร้าง Div ซ้อนทับทั้งหน้า (ไม่ใช่แค่วิวพอร์ต)?

Question 1

ดังนั้นฉันจึงมีปัญหาที่ฉันคิดว่าค่อนข้างบ่อย แต่ฉันยังไม่พบวิธีแก้ปัญหาที่ดี ฉันต้องการสร้าง Div โอเวอร์เลย์ครอบคลุมหน้าทั้งหมด ... ไม่ใช่แค่วิวพอร์ต ฉันไม่เข้าใจว่าทำไมสิ่งนี้ถึงทำได้ยาก ... ฉันได้ลองตั้งค่าร่างกาย 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 ธรรมดา ๆ

Question 2

วิวพอร์ตเป็นสิ่งสำคัญ แต่คุณอาจต้องการให้ทั้งเว็บไซต์มืดลงแม้ในขณะที่เลื่อน สำหรับสิ่งนี้คุณต้องการใช้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>

Question 3

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

Question 4

ก่อนอื่นฉันคิดว่าคุณเข้าใจผิดว่าวิวพอร์ตคืออะไร วิวพอร์ตเป็นพื้นที่ที่เบราว์เซอร์ใช้ในการแสดงผลหน้าเว็บและคุณไม่สามารถสร้างเว็บไซต์ของคุณเพื่อแทนที่พื้นที่นี้ไม่ว่าด้วยวิธีใด ๆ

ประการที่สองดูเหมือนว่าสาเหตุที่การซ้อนทับของคุณไม่ครอบคลุมวิวพอร์ตทั้งหมดเป็นเพราะคุณต้องลบระยะขอบทั้งหมดใน BODY และ HTML

ลองเพิ่มสิ่งนี้ที่ด้านบนสุดของสไตล์ชีตของคุณ - มันจะรีเซ็ตระยะขอบและการพายเรือในทุกองค์ประกอบ ทำให้การพัฒนาต่อไปง่ายขึ้น:

* { margin: 0; padding: 0; }

แก้ไข: ฉันเพิ่งเข้าใจคำถามของคุณดีขึ้น Position: fixed; อาจจะได้ผลสำหรับคุณอย่างที่โจนาธานแซมป์สันเขียนไว้

Question 5

ฉันมีปัญหาเล็กน้อยเนื่องจากฉันไม่ต้องการแก้ไขภาพซ้อนทับให้เข้าที่เนื่องจากฉันต้องการให้ข้อมูลภายในภาพซ้อนทับเลื่อนไปบนข้อความได้ ฉันใช้:

<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 ที่อยู่ตรงกลางต้องการเนื้อหาบางส่วนและอาจเป็นพื้นหลังสีเทาโปร่งใส แต่ฉันแน่ใจว่าคุณเข้าใจแล้ว!

Question 6

ฉันดูคำตอบของ Nate Barr ข้างต้นซึ่งคุณดูเหมือนจะชอบ ดูเหมือนจะไม่แตกต่างจากแบบเรียบง่ายมากนัก

html {background-color: grey}