একে অপরের উপরে ডিআইভি স্ট্যাকিং?

Question

একাধিক ডিআইভি যেমন স্ট্যাক করা সম্ভব:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

যাতে inner সমস্ত অভ্যন্তরীণ ডিআইভির একই এক্স এবং ওয়াই অবস্থান থাকে? ডিফল্টরূপে তারা সকলে একে অপরের নীচে যায় শেষের ডিআইভির উচ্চতা দ্বারা ওয়াই অবস্থানটি বাড়িয়ে তোলে।

আমার মনে হচ্ছে কোনও ধরণের ভাসা বা প্রদর্শন বা অন্য কৌশলটি কামড় দিতে পারে?

সম্পাদনা: পিতামাতার ডিআইভির পজিশন আপেক্ষিক রয়েছে, সুতরাং পজিশন নিরঙ্কুশ ব্যবহার করা মনে হয় না।

Comments

আমার উত্তরটি পরিষ্কার করতে, আপনি পুরোপুরি ভিতরের ডিভগুলি অবস্থান করতে চান।

— ম্যাট

সম্পর্কিত: stackoverflow.com/q/2941189/435605

— AlikElzin-kilaka

Answer 1

আপনি চাইলে বাহ্যিক ডিভের অবস্থান করুন, তারপরে নিরঙ্কুশ ব্যবহার করে অভ্যন্তরীণ ডিভগুলি অবস্থান করুন। তারা সব স্ট্যাক আপ করা হবে।

.inner {
  position: absolute;
}

<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

Comments

এটি কাজ করে বলে মনে হচ্ছে না। হতে পারে আমার উল্লেখ করা উচিত ছিল যে আমার এই দৃশ্যটি রয়েছে: <ডিভ স্টাইল = "অবস্থান: পরম ..."> <ডিস্টাইল = "পজিশন: আপেক্ষিক ..."> <ডিভ> এটি স্ট্যাক করুন </ ডিভ> <ডিভ> স্ট্যাক এটি </ ডিভি> <ডিভ> এই স্ট্যাক </ ডিভি> <ডিভ> এই স্ট্যাক </ ডিভ> </ ডিভি> </ ডিভি>

— টাওয়ার

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

— ম্যাট

আমার পক্ষেও কাজ করেনি। দর্শকদের কাছে অনেকগুলি আনকাউন বাকি আছে।

— ইয়ান বেলাভান্স

আমি

— ডিভগুলি

এটি ডিসপ্লে প্রোপ সঙ্গে কিছু করতে পারে?

— ইয়ান বেলভান্স

Answer 2

ডেভের উত্তর যুক্ত করতে:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

Comments

এটি কাজ করে বলে মনে হচ্ছে না। হতে পারে আমার উল্লেখ করা উচিত ছিল যে আমার এই দৃশ্যটি রয়েছে: <ডিভ স্টাইল = "অবস্থান: পরম ..."> <ডিস্টাইল = "পজিশন: আপেক্ষিক ..."> <ডিভ> এটি স্ট্যাক করুন </ ডিভ> <ডিভ> স্ট্যাক এটি </ ডিভি> <ডিভ> এটি স্ট্যাক করুন </ ডিভি> <ডিভ> এটি স্ট্যাক করুন </ div> </ div> </ div>

— টাওয়ার

আমি মনে করি সেক্ষেত্রে আপনি "শীর্ষ: 0; বাম: 0;" সেট করতে চান আপনার ডিভিতে যা "অবস্থান: আপেক্ষিক" রয়েছে। অবশ্যই এটিতে আই 6 পরীক্ষা করুন, যদিও আমি নিশ্চিত করে বলতে পারি না যে এটি কাজ করবে।

— এরিক ভেন্ডেলিন

Answer 3

আপনি যদি আক্ষরিক অর্থে অন্যটির উপরে একটি রেখেছেন, তার উপরে একটি (সেম এক্স, ওয়াই অবস্থানগুলি, তবে বিভিন্ন জেড অবস্থান), তবে z-indexসিএসএস বৈশিষ্ট্যটি ব্যবহার করে দেখুন । এটি কাজ করা উচিত (অনির্ধারিত)

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

এটি 3 এর শীর্ষে 4, 2 এর শীর্ষে 3 এবং আরও কিছু প্রদর্শন করা উচিত। জেড-ইনডেক্স যত বেশি হবে তত বেশি উপাদানটি জেড-অক্ষের উপরে অবস্থিত। আমি আশা করি এটি আপনাকে সহায়তা করেছে :)

Answer 4

style="position:absolute"

Answer 5

আমি ডিভগুলি সামান্য অফসেটে স্থাপন করেছি, যাতে আপনি এটি কর্মক্ষেত্রে দেখতে পারেন।
এইচটিএমএল

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

সিএসএস

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

Answer 6

এটি ঠিক করার জন্য আপনি এখন সিএসএস গ্রিড ব্যবহার করতে পারেন।

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

এবং এর জন্য সিএসএস:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

Answer 7

আমি জানি যে এই পোস্টটি কিছুটা পুরানো তবে আমার একই সমস্যা ছিল এবং বেশ কয়েক ঘন্টা এটি ঠিক করার চেষ্টা করা হয়েছিল। অবশেষে আমি সমাধানটি পেয়েছি:

যদি আমাদের 2 বাক্স স্থির থাকে ol

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

আমরা আশা করি যে পর্দায় একটি বাক্স থাকবে। এটি করার জন্য আমাদের অবশ্যই মার্জিন-নীচে-উচ্চতার সমান সেট করতে হবে, সুতরাং এটি করা:

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

আমার জন্য ভাল কাজ করে।

Answer 8

আমার অনুরূপ প্রয়োজনীয়তা ছিল যা আমি নীচের অংশে চেষ্টা করেছি।

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview