সিএসএস: কীভাবে অবস্থান করবেন: পজিশনের অভ্যন্তরে পরম ডিভ: আপেক্ষিক ডিভ একটি ওভারফ্লো দ্বারা ক্রপ করা হবে না: একটি ধারকটিতে লুকানো

143

আমার 3 টি স্তর রয়েছে div:

(নীচের সবুজ ইন) শীর্ষ পর্যায়ে divসঙ্গে overflow: hidden। এটি কারণ আমি বাক্সের আকারের চেয়ে বেশি হলে কিছু বাক্সের (এখানে দেখানো হয়নি) ক্রপ করা উচিত।
(নীচে লাল রঙে) এর ভিতরে, আমার divসাথে আছে position: relative। এর জন্য একমাত্র ব্যবহার পরবর্তী স্তরের জন্য।
(নীচে নীলে) শেষ পর্যন্ত divআমি এর সাথে প্রবাহটি বের করি position: absoluteতবে আমি লাল div(পৃষ্ঠায় নয়) এর সাথে সম্পর্কিত হতে চাই।

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

তবে নীচের কোড সহ, আমি পেয়েছি:

এবং position: relativeলাল বাক্সে থাকা অপসারণ , এখন নীল রঙের বাক্সটি সবুজ বাক্স থেকে বেরিয়ে আসার অনুমতি দেওয়া হয়েছে, তবে এটি লাল বাক্সের তুলনায় আর অবস্থিত নয়:

উপায় আছে কি:

overflow: hiddenসবুজ বাক্সে রাখুন ।
নীল বাক্সটি কি সবুজ বাক্স ছাড়িয়ে প্রসারিত হয়েছে এবং লাল বাক্সের সাথে তুলনামূলকভাবে অবস্থান করবে?

সম্পূর্ণ উত্স:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

css overflow css-position

— avernet
সূত্র

44

ভাল বিন্যাসিত প্রশ্ন এবং উত্স কোডের জন্য +1

— গ্রাফিকডাইভাইন

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

— অ্যান্টনি

অ্যান্টনি, হ্যাঁ, এটি ঠিক এটি। এবং আমি লাল বাক্সের (# 2) কী ঘটবে সে সম্পর্কে মাথা ঘামাই না, যা নীলের উপরের / ডানদিকে (# 3) প্রভাবিত করতে পারে।

— avernet

2

এমন প্রশ্নের সঠিকভাবে ব্যাখ্যা করার জন্য +1 যা আমি মনে করি যে ব্যাখ্যা করা খুব কঠিন তবে সত্যই এর উত্তর চাইছিল wanted

— অ্যান্ড্রু মাও

position: fixedযে overflow:hiddenকোনও উপাদান রয়েছে তা উপেক্ষা করবে ।

— কেভিন বিয়াল 18

48

একটি কৌতুক যে কাজ সঙ্গে অবস্থান বক্স # 2 হয় position: absoluteপরিবর্তে position: relative। position: relativeবাইরের বাক্সের position: absoluteতুলনায় আমরা কোনও অভ্যন্তরীণ বক্স (এখানে বক্স # 3) রাখতে চাইলে আমরা সাধারণত একটি বাইরের বাক্সে (এখানে বক্স # 2) রাখি । তবে মনে রাখবেন: # 3 বাক্সের সাথে # 2 বক্সের তুলনায় অবস্থান করতে, বক্স # 2 ঠিক ঠিক করা দরকার। এই পরিবর্তন সঙ্গে, আমরা পেতে:

এবং এই পরিবর্তন সহ পুরো কোডটি এখানে রয়েছে:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

— avernet
সূত্র

5

আমি আসলে ব্যবহার করেছি position: staticএবং এটি আমার পক্ষে আরও ভাল কাজ করেছে

— জেসন

@ জেসন, খুব আকর্ষণীয়; সুতরাং আপনি বলছেন যে আপনি position: static# 2 পরিবর্তে বাক্সে ব্যবহার করছেন position: absolute।

— আওয়ারনেট

1

আপনি কি ব্যাখ্যা করতে পারেন যে absoluteক্লিপ না relativeকরে তবে কী করে?

— অ্যান্ড্রু মাও

1

আপনি # 1 এবং # 3 এর মধ্যে সমস্ত কিছু নিখুঁত হিসাবে তৈরি না করা হলে এই সমাধান কার্যকর হবে না। ব্যবহারিকভাবে বলতে গেলে, এটি অসম্ভব।

— উইন্ডমায়াও

1

ভাবছি এই জাতীয় রঙগুলি ব্যবহার করে এইরকম ভিজ্যুয়াল কিছু ব্যাখ্যা করার উদ্দেশ্য কী ...

— ed1nh0

5

ওভারফ্লো লুকানো ধারকটির বাইরে কিছু প্রদর্শনের যাদুকরী সমাধান নেই।

আপনার বর্তমান আপেক্ষিক ধারক (যে ডিভ আপনি ক্লিপ করতে চান না তা এই ডিভের বাইরে হওয়া উচিত) এর ভিতরে অবস্থান করে তার পিতামাতার আকারের সাথে মেলে এমন একটি নিখুঁত অবস্থান ডিভ থাকার মাধ্যমে একইরকম প্রভাব পাওয়া যায়:

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

মনে রাখবেন যে আপনি যদি কেবলমাত্র অক্ষ অক্ষের উপর লিখিত সামগ্রীগুলি ক্লিপ করতে থাকেন (যা আপনার ক্ষেত্রে প্রদর্শিত হয়, যেমন আপনি কেবল ডিভের প্রস্থ নির্ধারণ করেছেন), আপনি ব্যবহার করতে পারেন overflow-x: hidden।

— ভীসা
সূত্র

0

আমি সত্যিই এটি করার মতো কোনও উপায় দেখছি না। আমার মনে overflow:hiddenহয় আপনার অনির্ধারিত 'সামগ্রী' ধরে রাখতে overflow:hiddenপরিবর্তে ডিভ # 1 থেকে ডিভ # 1 থেকে অন্য ডিভ যুক্ত করতে হবে (অর্থাত্ ডিভ # 2 তে পিতা হিসাবে) add আমি ভাবি না যে ওভারফ্লো অতি-চালিত (বা হতে সক্ষম হওয়া উচিত) হতে পারে।

— graphicdivine
সূত্র

0

যদি বাইরের-ডিভের (গ্রিন বক্স) ভিতরে অন্য লিখিত সামগ্রী প্রদর্শিত না হয়, তবে কেন সেই লিখিত সামগ্রীটি অন্য ডিভের ভিতরে আবৃত করা হয়নি, আসুন আমরা এটি কল করি "content"। এই নতুন অভ্যন্তর-ডিভের উপর ওভারফ্লো লুকিয়ে আছে তবে সবুজ বাক্সে ওভারফ্লো দৃশ্যমান রাখুন।

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

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— এন্থনি
সূত্র