অবস্থান নিখুঁত এবং ওভারফ্লো লুকানো

Question

আমাদের দুটি ডিআইভি রয়েছে, একটিতে অন্যটিতে এম্বেড রয়েছে। যদি বাহ্যিক ডিআইভি সম্পূর্ণরূপে অবস্থিত না হয় তবে অভ্যন্তরীণ ডিআইভি, যা নিখুঁতভাবে অবস্থিত, বাহ্যিক ডিআইভির গোপন ওভারফ্লোটি মানায় না ( উদাহরণস্বরূপ )।

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

অন্য কোন বিকল্প আছে?

Answer 1

বাইরের করুন <div>থেকে position: relativeএবং ভিতরের <div>করতে position: absolute। এটা আপনার জন্য কাজ করা উচিত।

Comments

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

— জারদোজ

কিছু ব্যাখ্যা এবং / বা ডকুমেন্টেশন একটি দুর্দান্ত সংযোজন হবে।

— শোদেব

Answer 2

কি position: relativeবাইরের DIV আছে জন্য? উদাহরণস্বরূপ যা আভ্যন্তরীণটি লুকায়। আপনি কোনও শীর্ষ বা বাম নির্দিষ্ট না করায় এটি এটি এর বিন্যাসেও সরবে না।

Answer 3

একটি একেবারে অবস্থানযুক্ত উপাদানটি আসলে relativeপিতামাতা বা নিকটতম প্রাপ্ত আত্মীয় পিতামাতার বিষয়ে অবস্থিত। সুতরাং এর সাথে উপাদানগুলির overflow: hiddenমধ্যে relativeএবং অবস্থিত absoluteউপাদানগুলির মধ্যে হওয়া উচিত :

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Answer 4

আপনি কেবল এটি তৈরি করুন div:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

আমি আশা করি এই কোডটি আপনাকে সহায়তা করবে :)