ডিভ ওভারলে পুরো পৃষ্ঠাটি তৈরি করুন (কেবল ভিউপোর্ট নয়)?

Question 1

সুতরাং আমার একটি সমস্যা রয়েছে যা আমি মনে করি এটি বেশ সাধারণ তবে আমি এখনও এর একটি ভাল সমাধান খুঁজে পাইনি। আমি একটি ওভারলে ডিভটি পুরো পৃষ্ঠাটি কভার করতে চাই ... শুধু ভিউপোর্ট নয়। আমি বুঝতে পারছি না কেন এটি করা এত কঠিন ... আমি বডি, এইচটিএমএল উচ্চতা 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>

আমি জাভাস্ক্রিপ্টের একটি সমাধানের জন্য যদি উপস্থিত থাকে তবে এটির জন্যও আমি উন্মুক্ত থাকব তবে আমি কেবল কিছু সাধারণ সিএসএস ব্যবহার করব।

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

প্রথমত, আমার মনে হয় আপনি ভিউপোর্টটি কী তা ভুল বুঝেছেন। ব্রাউজার ওয়েব পৃষ্ঠাগুলি রেন্ডার করতে ব্যবহার করে এমন ভিউপোর্ট হ'ল অঞ্চল এবং কোনওভাবেই এই অঞ্চলটিকে ওভাররাইড করতে আপনার ওয়েবসাইটগুলি কোনওভাবেই তৈরি করতে পারবেন না।

দ্বিতীয়ত, এটি দেখে মনে হচ্ছে যে আপনার ওভারলে-ডিভটি পুরো ভিউপোর্টটি কভার করবে না কারণ আপনি দেহ এবং এইচটিএমএলে সমস্ত মার্জিন সরিয়ে ফেলতে হবে।

আপনার স্টাইলশিটের শীর্ষে এটি যুক্ত করার চেষ্টা করুন - এটি সমস্ত উপাদানগুলিতে সমস্ত মার্জিন এবং প্যাডিং পুনরায় সেট করে। আরও উন্নয়ন সহজ করে তোলে:

* { 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>

অবশ্যই মধ্যভাগে ডিভের জন্য কিছু বিষয়বস্তু এবং সম্ভবত একটি স্বচ্ছ ধূসর ব্যাকগ্রাউন্ডের প্রয়োজন তবে আমি নিশ্চিত আপনি সংক্ষেপটি পেয়ে যাবেন!

Question 6

আমি উপরে নেট বারের উত্তরটির দিকে চেয়েছিলাম, যা আপনার পছন্দ হয়েছে বলে মনে হয়েছে। এটি সহজ থেকে খুব আলাদা বলে মনে হচ্ছে না

html {background-color: grey}