সিএসএস: উচ্চতা উল্লেখ না করে একে অপরের উপরে দুটি উপাদান কীভাবে রাখবেন?

Question

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

উপরের বাম প্রান্তটি .layer2ঠিক উপরের বাম প্রান্তে প্রান্তিক করা উচিতlayer1

<!-- HTML -->
<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

/* CSS */
.container_row {}

.layer1 {
    position:absolute;
    z-index: 1;
}

.layer2 {
    position:absolute;
    z-index: 2;
}

Comments

position: absoluteতখন ব্যবহার করার মতো সঠিক শৈলী নয়।

— BoltClock

হ্যাঁ, position:absoluteঠিক মনে হচ্ছে না। সঠিক স্টাইলটি কী হবে?

— অ্যান্ড্রু 18

কি .layer1এবং .layer2উপাদানের একটি পরিচিত আকার আছে?

— মিউ খুব ছোট

না, তাদেরও একটি অজানা আকার রয়েছে।

— অ্যান্ড্রু

Answer 1

প্রথমত, আপনার সত্যিকার অর্থে একেবারে অবস্থানযুক্ত উপাদানগুলির অবস্থান অন্তর্ভুক্ত করা উচিত বা আপনি বিজোড় এবং বিভ্রান্তিমূলক আচরণের সামনে আসবেন; আপনি সম্ভবত top: 0; left: 0আপনার একেবারে অবস্থানযুক্ত উপাদানগুলির জন্য সিএসএসে যুক্ত করতে চান । এছাড়াও আপনি আছে চাইবেন position: relativeউপর .container_rowযদি আপনি চান তাহলে পরিপূর্ণভাবে পজিশন করা বিষয়গুলি স্থান করা বরং দস্তাবেজের শরীরের তুলনায় তাদের পিতা বা মাতা থেকে সম্মান সঙ্গে :

যদি উপাদানটির 'অবস্থান: পরম' থাকে তবে ধারণকৃত ব্লকটি 'পরম', 'আপেক্ষিক' বা 'স্থির' এর 'অবস্থান' সহ নিকটতম পূর্বপুরুষ দ্বারা প্রতিষ্ঠিত হয় ...

আপনার সমস্যাটি হ'ল position: absoluteউপাদানগুলি স্বাভাবিক প্রবাহ থেকে সরিয়ে দেয় :

এটি পুরোপুরি স্বাভাবিক প্রবাহ থেকে সরিয়ে ফেলা হয় (পরবর্তী ভাইবোনের উপর এর কোনও প্রভাব নেই)। একেবারে অবস্থানযুক্ত বাক্সটি স্বাভাবিক প্রবাহ শিশুদের জন্য একেবারে (তবে স্থির নয়) অবস্থানযুক্ত বংশধরদের জন্য একটি নতুন সমন্বিত ব্লক স্থাপন করে। তবে, একেবারে অবস্থানযুক্ত উপাদানের সামগ্রীগুলি অন্য কোনও বাক্সের চারপাশে প্রবাহিত হয় না।

এর অর্থ হ'ল একেবারে অবস্থানযুক্ত উপাদানগুলির পিতামাতার উপাদানগুলির আকারের উপর কোনও প্রভাব নেই এবং আপনার প্রথমটির <div class="container_row">উচ্চতা শূন্য হবে।

সুতরাং আপনি পুরোপুরি অবস্থিত উপাদানগুলির সাথে যা করার চেষ্টা করছেন তা করতে পারবেন না যদি না আপনি জানেন যে তারা কতটা লম্বা হতে চলেছে (বা সমতুল্যভাবে, আপনি তাদের উচ্চতা নির্দিষ্ট করতে পারেন)। আপনি যদি উচ্চতা নির্দিষ্ট করতে পারেন তবে আপনি একই উচ্চতাগুলি উপর চাপিয়ে দিতে পারেন .container_rowএবং সমস্ত কিছু সীমাবদ্ধ থাকবে; আপনি একেবারে অবস্থানগত উপাদানগুলির জন্য ঘর ছেড়ে margin-topদ্বিতীয় দিকেও যেতে পারেন .container_row। উদাহরণ স্বরূপ:

http://jsfiddle.net/ambiguous/zVBDc/

Comments

দুর্দান্ত উত্তর, ধন্যবাদ! আমার ধারণা আমি জাভাস্ক্রিপ্ট ব্যবহার করে ডায়নামিকভাবে উচ্চতা নির্ধারণ করতে পারি। আমি কেবল আশা করছিলাম যে এটি আসবে না। = [

— অ্যান্ড্রু

@ অ্যান্ড্রু: হ্যাঁ, সিএসএসের উল্লম্ব আকারের / অবস্থান / প্রান্তিককরণ ব্যবস্থায় আপনাকে স্বাগতম: আপনি যদি নির্দিষ্ট আকারের জিনিসগুলি সাধারণত ভাগ্যের আওতায় না জানেন তবে। অনুভূমিক স্টাফগুলি মোকাবেলা করা সহজ তবে এটি বেশিরভাগের এখনও গন্ধে লাগে যা এটি "গতিশীল বিন্যাসের লোকদের" পরিবর্তে "স্থির লেআউট প্রিন্টের লোকেরা" দ্বারা ডিজাইন করেছিলেন।

— মিউ খুব ছোট

position: absoluteদরকার নেই । দয়া করে চেক করুন: stackoverflow.com/a/51949049/1736186

— পরিবর্তে

Answer 2

আসলে এটি অবস্থান absoluteএবং কোনও উচ্চতা উল্লেখ না করেই সম্ভব । আপনাকে যা করতে হবে তা হ'ল display: gridপ্যারেন্ট উপাদানটিতে ব্যবহার করা এবং বংশধরদের একই সারিতে এবং কলামে রাখা put

আপনার এইচটিএমএল উপর ভিত্তি করে নীচের উদাহরণ পরীক্ষা করুন। আমি কেবল <span>এবং কিছু রঙ যুক্ত করেছি, যাতে আপনি ফলাফলটি দেখতে পারেন।

z-indexএর দৃশ্যমানতা (যা শীর্ষে থাকা উচিত) এটিকে পরিচালনা করতে আপনি সহজেই প্রতিটি বংশজাত উপাদানকে পরিবর্তন করতে পারেন ।

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1 span{
  color: #fff;
  background: #000cf6;
}

.layer2{
  background: rgba(255, 0, 0, 0.4);
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...<br>Test test</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

Comments

ভাল লাগল তবে সত্যি কথা বলতে, display: gridসাত বছর আগে এর অস্তিত্ব ছিল না :)

— মিউ খুব

নীচে অন্য উত্তর রয়েছে, @ কর্নেলিয়াস লিখেছেন। তিনি ব্যবহার করেন flex, যার আজকাল ব্রাউজার সমর্থন আরও ভাল।

— ওলেগ চের

@ মিউস্টোশোর্ট তবে এটি এখন বিদ্যমান এবং এই প্রশ্নটির অনেক দৃষ্টিভঙ্গি রয়েছে

— বোরোবরিস

@ বোরোবরিস সেজন্য upর্ধ্বতনগুলির একটি আমার।

— মিউ খুব ছোট

Answer 3

দুর্দান্ত উত্তর, "মিউ খুব ছোট"। আমি ঠিক একই জিনিসটি সন্ধান করছিলাম এবং আপনার পোস্টটি পড়ার পরে আমি এমন একটি সমাধান পেয়েছি যা আমার সমস্যার জন্য উপযুক্ত।

আমার কাছে একই আকারের দুটি উপাদান ছিল এবং সেগুলি স্ট্যাক করতে চাই। প্রত্যেকের আকার একই থাকায় আমি যা করতে পারতাম তা তৈরি করা ছিল

position: absolute;
top: 0px;
left: 0px;

শুধুমাত্র শেষ উপাদান। এভাবে প্রথম উপাদানটি সঠিকভাবে inোকানো হয়, পিতামাতার উচ্চতাটিকে "ধাক্কা" দেওয়া হয় এবং দ্বিতীয় উপাদানটি শীর্ষে রাখা হয়।

আশা করি এটি একই সাথে (অজানা) উচ্চতার সাথে 2+ উপাদানকে স্ট্যাক করার চেষ্টা করছে এমন অন্যান্য ব্যক্তিকে সহায়তা করে।

Comments

বিশেষ দ্রষ্টব্য: এই পদ্ধতির সঙ্গে, আপনি এখনও জানি যা উপাদান লম্বা এক, যাতে আপনি যা করতে পারেন প্রয়োজন হবে অন্যান্য করুন। position: aboslute

— এলেক

Answer 4

এখানে ডিসপ্লে ব্যবহার করে আরও একটি সমাধান রয়েছে: অবস্থানের পরিবর্তে ফ্লেক্স: পরম বা প্রদর্শন: গ্রিড।

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

Comments

দুর্দান্ত সমাধান। ধন্যবাদ!

— ওলেগ চের

Answer 5

আমি সেট করতে হয়েছিল

ধারক_ইহাইট = উপাদান 1_ উচ্চতা = উপাদান 2_ উচ্চতা

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

কোনটি শীর্ষে থাকবে সেট করতে ব্যবহার z-index ব্যবহার করতে পারে।

Answer 6

এখানে কিছু পুনরায় ব্যবহারযোগ্য সিএসএস যা ব্যবহার না করে প্রতিটি উপাদানের উচ্চতা রক্ষা করবে position: absolute:

.stack {
    display: grid;
}
.stack > * {
    grid-row: 1;
    grid-column: 1;
}

আপনার প্রথম উপাদানটি stackপটভূমি এবং দ্বিতীয়টি পূর্বগ্রন্থ।

Answer 7

নিখুঁত অবস্থানের কারণে নথির প্রবাহের অবস্থান থেকে উপাদানগুলি অপসারণ করা: কাজের জন্য উপযুক্ত নয় absolute আপনি যে সঠিক লেআউটটি তৈরি করতে চান তার উপর নির্ভর করে আপনি নেতিবাচক মার্জিন, অবস্থান: আপেক্ষিক বা এমনকি রূপান্তর: অনুবাদ করেও সফল হতে পারবেন। আপনি কী করতে চান তার একটি নমুনা আমাদের দেখান আমরা আপনাকে আরও ভালভাবে সহায়তা করতে পারি।

Answer 8

অবশ্যই, সমস্যাটি আপনার উচ্চতা ফিরে পাওয়ার বিষয়ে getting তবে যদি আপনি সময়ের আগে উচ্চতা না জানেন তবে আপনি কীভাবে তা করতে পারেন? ঠিক আছে, আপনি যদি ধারন করেন যে কোন দিকটি অনুপাত দিতে চান (এবং এটি প্রতিক্রিয়াশীল রাখুন), আপনি শতাংশ হিসাবে প্রকাশিত পাত্রে অন্য সন্তানের প্যাডিং যুক্ত করে আপনার উচ্চতা ফিরে পেতে পারেন।

এমনকি আপনি ধারকটিতে একটি ডামি যুক্ত divকরতে পারেন padding-top: 56.25%এবং ডামি উপাদানটিকে উচ্চতা দেওয়ার মতো কিছু সেট করতে পারেন যা ধারকের প্রস্থের অনুপাত a এটি ধারকটিকে বাইরে বের করে দেবে এবং এটিকে একটি অনুপাত দেবে, এই ক্ষেত্রে 16: 9 (56.25%)।

প্যাডিং এবং মার্জিন প্রস্থের শতাংশ ব্যবহার করে, এটি এখানে সত্যই কৌশল।

Answer 9

অনেক পরীক্ষার পরে, আমি যাচাই করেছি যে মূল প্রশ্নটি ইতিমধ্যে সঠিক; মাত্র কয়েকটি সেটিংস অনুপস্থিত:

• container_rowথাকতে হবেposition: relative;
• বাচ্চাদের (...) থাকতে হবে position: absolute; left:0;
• বাচ্চাদের (...) একে অপরের সাথে ঠিক সারিবদ্ধ হওয়ার জন্য, container_rowঅতিরিক্ত স্টাইলিং থাকা উচিত:
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center; সাহায্য করতে পারে।