কীভাবে একটি ডিভকে অন্য ডিভের উপরে ওভারলে করা যায়

Question

একজনের divউপর অন্য ব্যক্তির ওপরে পোস্ট করাতে আমার সহায়তা দরকার div।

আমার কোডটি এর মতো দেখাচ্ছে:

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

দুর্ভাগ্যবশত আমি নীড় পারব না div#infoiবা img, প্রথম ভিতরে div.navi।

এটি divপ্রদর্শিত হিসাবে দুটি পৃথক এস হতে হবে , তবে আমি কীভাবে div#infoiওভারটি div.naviএবং ডানদিকে সবচেয়ে বেশি রাখতে এবং উপরের দিকে কেন্দ্রীভূত করতে পারি তা জানতে হবে div.navi।

Comments

এই প্রশ্নের ক্ষেত্রে নয় তবে আপনার যদি অন্য একটি ডিভের ভিতরে একটি ডিভ থাকে তবে অভ্যন্তরীণ ডিভটি পুরো বা আংশিকভাবে মুখোশযুক্ত হয়ে থাকতে পারে overflow: hidden, overflow: visibleপরিবর্তে ব্যবহার করুন।

— ক্রিস্টোফ রাউসি

Answer 1

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

আমি position: relativeএবং শিশু উপাদানগুলি সম্পর্কে শিখার পরামর্শ দেব position: absolute।

Comments

আপনার সহায়তার জন্য ধন্যবাদ অ্যালেক্স তবে আমি এখন যা খুঁজে পাচ্ছি তা হ'ল আমি যখন আমার উইন্ডোটির আকার পরিবর্তন করি এবং এটিকে আরও ছোট করে টেনে আনি, তখন আমার তথ্য চিত্রটি তার পিতামাতার সাথে ভাগ করে নি staying মূলত এটি প্যারেন্ট ডিভের সাথে সরানো এবং পর্দার কিছুটা আকার পরিবর্তন করা সত্ত্বেও একই অবস্থানে বেশ কিছুক্ষন থাকতে চান।

— টনিফ

@ টনসিলস: অ্যালেক্সের নির্দেশাবলী আপনাকে পছন্দসই ফলাফল দেবে, সুতরাং আপনার বিবরণে সমস্যা সৃষ্টি করার মতো অন্য কিছু থাকতে হবে। আপনি কি আমাদের কোডের একটি নমুনা সরবরাহ করতে পারেন (এইচটিএমএল + সিএসএস) যাতে আমরা আপনাকে সহায়তা করতে পারি?

— এরিক ট্যারি সিলফ্রেসওয়ার্ড

absoluteলী অবস্থানযুক্ত উপাদানগুলি তাদের নিকটতম স্পষ্টত অবস্থানযুক্ত ( position:absolute|relative|fixed) প্যারেন্ট উপাদানগুলির সাথে তুলনামূলকভাবে অবস্থান করে । ঠিক আরও স্পষ্টতা ... jsfiddle.net/p5jkc8gz

— xandercoded

কেসের উপর নির্ভর করে এটি মানিয়ে নেওয়া যেতে পারে। আমার পরিস্থিতিতে আমার শীর্ষস্থানীয় # নবী দরকার ছিল না: 0 বাম: 0, এবং সাধারণ ক্ষেত্রে আপনার যদি এইচটিএমএল কোড থাকে তবে এটি HTML টি গাছ পার্স করার পরে এটি অবস্থিত থাকবে। সুতরাং সম্ভবত এই ক্ষেত্রে যে সংজ্ঞা প্রয়োজন হয় না।

— ফ্যাব্রিকিও পিএইচ

Answer 2

গৃহীত সমাধানটি দুর্দান্ত কাজ করে তবে এটি কেন কাজ করে তা সম্পর্কিত আইএমওর কোনও ব্যাখ্যা নেই। নীচের উদাহরণটি বেসিকগুলিতে সিদ্ধ হয় এবং গুরুত্বপূর্ণ সিএসএসকে অ-প্রাসঙ্গিক স্টাইলিং সিএসএস থেকে পৃথক করে। বোনাস হিসাবে, আমি সিএসএস পজিশনিং কীভাবে কাজ করে তার একটি বিশদ বিবরণ অন্তর্ভুক্ত করেছি।

TLDR; আপনি শুধুমাত্র কোড চাই, এর নিচে স্ক্রল ফল ।

সমস্যাটি

দুটি পৃথক, ভাইবোন উপাদান ও লক্ষ্য (একটি দ্বিতীয় উপাদান অবস্থান হয় idএর infoi,) তাই এটি পূর্ববর্তী উপাদান (ক সঙ্গে এক মধ্যে প্রদর্শিত classএর navi)। এইচটিএমএল কাঠামো পরিবর্তন করা যায় না।

প্রস্তাবিত সমাধান

কাঙ্ক্ষিত ফলাফল অর্জনের জন্য আমরা সরাতে যাচ্ছি দ্বিতীয় অবস্থান, বা অবস্থান, যা আমরা কল করব #infoiতাই এটি প্রথম উপাদানটির মধ্যে উপস্থিত হবে, যা আমরা কল করব .navi। বিশেষত, আমরা #infoiউপরের-ডানদিকে অবস্থিত হতে চাই .navi।

সিএসএস অবস্থান প্রয়োজনীয় জ্ঞান

সিএসএসের অবস্থানের উপাদানগুলির জন্য বেশ কয়েকটি বৈশিষ্ট্য রয়েছে। ডিফল্টরূপে, সমস্ত উপাদান হয় position: static। এর অর্থ কিছু ব্যতিক্রম বাদে উপাদানটি এইচটিএমএল কাঠামোর ক্রম অনুসারে অবস্থান করবে।

অন্যান্য positionমান relative, absolute, sticky, এবং fixed। positionএই অন্যান্য মানগুলির একটিতে একটি উপাদানের সেট করে এখন উপাদানটি অবস্থানের জন্য নিম্নলিখিত চারটি বৈশিষ্ট্যের সংমিশ্রণ ব্যবহার করা সম্ভব:

• top
• right
• bottom
• left

অন্য কথায়, সেট করে position: absoluteআমরা top: 100pxপৃষ্ঠার শীর্ষ থেকে 100 পিক্সেল উপাদান যুক্ত করতে পারি । বিপরীতে, যদি আমরা bottom: 100pxউপাদানটি সেট করি তবে পৃষ্ঠার নীচ থেকে 100 পিক্সেল অবস্থান করা হবে।

এখানে অনেকগুলি সিএসএস আগত লোক হারিয়ে যেতে পারে -position: absoluteএখানে একটি ফ্রেম রেফারেন্স রয়েছে। উপরের উদাহরণে রেফারেন্সের ফ্রেমটিbodyউপাদানis position: absoluteএর সাহায্যেtop: 100pxউপাদানটির উপরের অংশ থেকে 100 পিক্সেল অবস্থান করা হয়body।

রেফারেন্সের অবস্থান ফ্রেম বা অবস্থানের প্রেক্ষাপটকে বাদ দিয়ে অন্য কোনও মূল্যেposition পিতামাতার উপাদান সেট করে পরিবর্তন করা যেতে পারে । এটি হল, আমরা প্যারেন্ট উপাদানটি দিয়ে একটি নতুন অবস্থানের প্রসঙ্গ তৈরি করতে পারি:position: static

• position: relative;
• position: absolute;
• position: sticky;
• position: fixed;

উদাহরণস্বরূপ, যদি কোনও <div class="parent">উপাদান দেওয়া হয় তবে যে position: relativeকোনও শিশু উপাদান <div class="parent">তাদের অবস্থানের প্রসঙ্গ হিসাবে ব্যবহার করে। যদি কোনও সন্তানের উপাদান দেওয়া হয় position: absoluteএবং top: 100px, উপাদানটিকে এলিমেন্টের শীর্ষ থেকে 100 পিক্সেল করা হয় <div class="parent">কারণ এটি <div class="parent">এখন অবস্থান প্রসঙ্গে।

সচেতন হওয়ার মতো অন্য উপাদানটি হ'ল স্ট্যাক অর্ডার - বা কীভাবে উপাদানগুলি জেড-দিকের দিকে সজ্জিত করা হয়। এখানে অবশ্যই জানতে হবে উপাদানগুলির স্ট্যাক ক্রম হ'ল ডিফল্টরূপে, এইচটিএমএল কাঠামোর মধ্যে তাদের ক্রমের বিপরীত দ্বারা সংজ্ঞায়িত করা হয়। নিম্নলিখিত উদাহরণ বিবেচনা করুন:

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

এই উদাহরণে, যদি দুটি <div>উপাদান পৃষ্ঠার একই জায়গায় অবস্থান করা হয়, তবে <div>Top</div>উপাদানটি উপাদানটি আবরণ করবে <div>Bottom</div>। যেহেতু <div>Top</div>পরে আসে <div>Bottom</div>এইচটিএমএল কাঠামো এটিতে উচ্চ সারিবদ্ধ অর্ডার হয়েছে।

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

<div id="bottom">Bottom</div>
<div id="top">Top</div>

স্ট্যাকিং অর্ডারটি সিএসএসের সাহায্যে z-indexবা orderবৈশিষ্ট্যগুলি ব্যবহার করে পরিবর্তন করা যেতে পারে ।

আমরা এই ইস্যুতে স্ট্যাকিং অর্ডারটিকে উপেক্ষা করতে পারি কারণ উপাদানগুলির প্রাকৃতিক এইচটিএমএল কাঠামোর অর্থ আমরা যে উপাদানটিতে প্রদর্শিত হতে চাই তা topঅন্য উপাদানগুলির পরে আসে।

সুতরাং, হাতে থাকা সমস্যার দিকে ফিরে - আমরা এই সমস্যাটি সমাধানের জন্য অবস্থানের প্রসঙ্গটি ব্যবহার করব।

সমাধান

উপরে বর্ণিত হিসাবে, আমাদের লক্ষ্য #infoiউপাদানটিকে অবস্থান দেওয়া তাই এটি .naviউপাদানটির মধ্যে উপস্থিত হয় appears এই কাজের জন্য, আমরা মোড়ানো করব .naviএবং #infoiএকটি নতুন উপাদান উপাদান <div class="wrapper">তাই আমরা একটি নতুন অবস্থান প্রসঙ্গ তৈরি করতে পারেন।

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

তারপর দেওয়ার মাধ্যমে একটি নতুন অবস্থান প্রসঙ্গ তৈরি .wrapperএকটি position: relative।

.wrapper {
  position: relative;
}

এই নতুন অবস্থানের প্রসঙ্গে, আমরা এর #infoiমধ্যে অবস্থান করতে পারি .wrapper। প্রথমে #infoiএকটি দিন position: absolute, আমাদের #infoiএকেবারে অবস্থান করতে দেয় .wrapper।

তারপর যোগ top: 0এবং right: 0সঠিক জায়গায় স্থাপনের জন্য #infoiউপরের ডান দিকের কোণায় অবস্থিত উপাদান। মনে রাখবেন, কারণ #infoiউপাদানটি .wrapperতার অবস্থানের প্রসঙ্গ হিসাবে ব্যবহার করছে, এটি .wrapperউপাদানটির উপরের অংশে থাকবে ।

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

কারণ .wrapperএটি কেবল একটি ধারক .navi, #infoiউপরের-ডানদিকে কোণায় অবস্থিতি উপরের-ডানদিকে অবস্থিত .wrapperহওয়ার প্রভাব দেয় .navi।

এবং সেখানে আমাদের এটি রয়েছে, #infoiএখন এটি উপরের-ডানদিকে রয়েছে বলে মনে হচ্ছে .navi।

ফলাফল

নীচের উদাহরণটি বেসিকগুলিতে সিদ্ধ হয়েছে এবং এতে কিছুটা ন্যূনতম স্টাইলিং রয়েছে।

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

একটি বিকল্প (গ্রিড) সমাধান

এখানে সিএসএস গ্রিড ব্যবহার জায়গায় স্থাপনের জন্য একটি বিকল্প সমাধান .naviসঙ্গে উপাদান #infoiপর্যন্ত ডানদিকে উপাদান। আমি gridযথাসম্ভব পরিষ্কার করার জন্য ভার্বোজের বৈশিষ্ট্যগুলি ব্যবহার করেছি ।

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

একটি বিকল্প (কোনও আবরণ নেই) সমাধান

ক্ষেত্রে আমরা কোনও এইচটিএমএল সম্পাদনা করতে পারি না, এর অর্থ আমরা একটি মোড়কের উপাদান যুক্ত করতে পারি না, আমরা এখনও পছন্দসই প্রভাব অর্জন করতে পারি।

উপাদানটি ব্যবহার position: absoluteকরার পরিবর্তে #infoi, আমরা ব্যবহার করব position: relative। এটি আমাদের #infoiএলিমেন্টের নীচের ডিফল্ট অবস্থান থেকে পুনঃস্থাপন করতে দেয় .navi। এর সাহায্যে position: relativeআমরা topএটির ডিফল্ট অবস্থান থেকে সরিয়ে নেওয়ার জন্য একটি নেতিবাচক মান এবং ডান-পাশের কাছে এটি স্থাপন করতে , কয়েক পিক্সেল বিয়োগের একটি leftমান 100%ব্যবহার left: calc(100% - 52px)করতে পারি।

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>

Comments

এটি সবচেয়ে কার্যকর এন্ট্রি আইএমও কারণ এটি ব্যাখ্যা করে যে এটি কেন কাজ করে!

— ব্রেট ওয়েনরব

আমি এখনও অবধি পজিশনিং কীভাবে কাজ করে তার এটি সম্ভবত সেরা ব্যাখ্যা। সংক্ষিপ্ত, কিন্তু এটি সঠিক পেতে যথেষ্ট গভীর।

— মার্সেল

উত্তরের গুণমানের উপর ডিট্টো। সবচেয়ে পরিষ্কার ব্যাখ্যা আমি দেখেছি।

— ওয়েড হ্যাটলার

এটি

— সিএসএসে

ব্যাখ্যার জন্য

— কুডোস

Answer 3

divস্টাইল সহ একটি ব্যবহার করে z-index:1;এবং position: absolute;আপনি divঅন্য কোনওটিকে ওভারলে করতে পারেন div।

z-indexডিভ 'স্ট্যাক' ক্রম নির্ধারণ করে। একটি উচ্চতর z-indexসহ একটি ডিভ একটি নিম্নের সাথে একটি ডিভের সামনে উপস্থিত হবে z-index। মনে রাখবেন যে এই সম্পত্তিটি শুধুমাত্র অবস্থানযুক্ত উপাদানগুলির সাথে কাজ করে ।

Comments

আপনি একটি উদাহরণ প্রদান করতে পারেন?

— ফ্যাব্রিকিও পিএইচ

অবস্থানযুক্ত উপাদানগুলি সম্পর্কে নোটটি গুরুত্বপূর্ণ।

— লরেন্স ডল

এই উত্তরটি এতটাই অসম্পূর্ণ যে কেন এটি ব্যাখ্যা করার জন্য এটি একটি পুরো পোস্টের প্রয়োজন। স্ট্যাকিং প্রসঙ্গে অনুসন্ধান করুন।

— বোজিদার স্টানচেভ

Answer 4

নতুন গ্রিড সিএসএস স্পেসিফিকেশন অনেক বেশি মার্জিত সমাধান সরবরাহ করে। ব্যবহারের position: absoluteফলে ওভারল্যাপ বা স্কেলিং সম্পর্কিত সমস্যা দেখা দিতে পারে যখন গ্রিড আপনাকে নোংরা সিএসএস হ্যাক থেকে রক্ষা করবে।

সর্বাধিক ন্যূনতম গ্রিড ওভারলে উদাহরণ:

এইচটিএমএল

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

সিএসএস

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

এটাই. আপনি যদি ইন্টারনেট এক্সপ্লোরারের জন্য তৈরি না করেন তবে আপনার কোডটি সম্ভবত কার্যকরভাবে কাজ করবে।

Comments

এটি শীর্ষ উত্তর হওয়া উচিত।

— ইনলাইন

উচ্চতর উত্তর। নির্বাচিত উত্তরগুলির পুনরায় মূল্যায়ন করা উচিত।

— আব্দুলজি

নিখুঁত সমাধান

— ডেনিজ দা কিং

Answer 5

এখানে CSS এর উপর ভিত্তি করে একটি সাধারণ সমাধান 100% অনুসরণ করা হয়েছে। "গোপন" হ'ল display: inline-blockমোড়কের উপাদানটি ব্যবহার করা । vertical-align: bottomছবিতে 4px প্যাডিং যে কিছু ব্রাউজার উপাদান পর যোগ পরাস্ত করার জন্য একটি হ্যাক হয়।

পরামর্শ : মোড়কের অভ্যন্তরে ইনলাইন থাকলে উপাদানটি নেস্ট করে শেষ করতে পারে। এক্ষেত্রে আপনি একটি পাত্রে "মোড়কে মোড়ানো" রাখতে পারেন display: block- সাধারণত ভাল এবং পুরানো div।

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

Answer 6

এটি আপনার প্রয়োজন:

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 0;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 1;
} 


</style>

<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />

  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

Answer 7

আমি কোনও কোডার বা সিএসএস-তে খুব বেশি বিশেষজ্ঞ নই, তবে আমি এখনও আপনার ওয়েব ডিজাইনগুলিতে আপনার ধারণাটি ব্যবহার করছি। আমিও বিভিন্ন রেজোলিউশন চেষ্টা করেছি:

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}

<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

অবশ্যই দুজনের চারপাশে একটি মোড়ক থাকবে। আপনি মেনু ডিভের অবস্থানটি নিয়ন্ত্রণ করতে পারেন যা বাম মার্জিন এবং শীর্ষ অবস্থানগুলির সাথে শিরোনাম ডিভের মধ্যে প্রদর্শিত হবে। আপনি যদি পছন্দ করেন তবে ডাইভ মেনুটি ঠিক ভাসতেও সেট করতে পারেন।

Answer 8

অন্য ডিভের উপর লোডিং আইকন দিয়ে ওভারলে প্রভাব আনার একটি সাধারণ উদাহরণ এখানে।

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

এটি এখানে চেষ্টা করুন: http://jsbin.com/fotozolucu/edit?html,css , আউটপুট