ডানদিকে ভাসা এবং অবস্থান পরম একসঙ্গে কাজ করে না

Question

আমি চাই একটি ডিভিউ সর্বদা তার পিতামাতার ডিভাইসের ডানদিকে থাকে, তাই আমি ব্যবহার করি float:right। এটা কাজ করে।

তবে আমি এটিও চাই যে এটি contentোকানোর সময় অন্যান্য সামগ্রীকে প্রভাবিত না করে, তাই আমি ব্যবহার করি position:absolute।

এখন float:rightকাজ করে না, আমার ডিভটি সর্বদা তার পিতামহিক ডিভের বামদিকে থাকে। আমি কীভাবে এটি ডানদিকে সরিয়ে নিতে পারি?

Answer 1

ব্যবহার

position:absolute; right: 0;

float:rightপরম পজিশনিংয়ের প্রয়োজন নেই

এছাড়াও, নিশ্চিত করুন যে প্যারেন্ট উপাদান সেট করা আছে position:relative;

Comments

যদি পিতামাতার উপাদানগুলির কেন্দ্রে ডিভ চান, আমি কীভাবে এটি করতে পারি?

— trbaphong

আপনার সাহায্যের জন্য ধন্যবাদ. আমি ব্যবহার করি left:50%এবং margin-left:-??px(?? আপনার

— ডিভ

@ Evers88 এর উত্তরের সাথে আমার এখনও 'ওভারফ্লো-ওয়াই: অটো' অপসারণ করতে হবে; এটি কার্যকর করার জন্য অভিভাবক উপাদান থেকে।

— অ্যাঞ্জেলোখ

ডিভের প্রস্থ গতিশীল হলে কী হবে

— মুহাম্মদ উমর

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

— স্পুয়াস

Answer 2

সাধারণত বলতে গেলে floatএটি একটি আপেক্ষিক অবস্থানের বিবৃতি, যেহেতু এটি তার মূল পাত্রে (ডান বা বামে ভাসমান) সম্পর্কিত উপাদানটির অবস্থান নির্দিষ্ট করে। এর অর্থ এটি position:absoluteসম্পত্তির সাথে বেমানান , কারণ position:absoluteএটি একটি পরম অবস্থান বিবরণী। আপনি হয় কোনও উপাদানকে ভাসিয়ে রাখতে পারেন এবং ব্রাউজারটিকে তার পিতামাত্রে ধারক হিসাবে এটি অবস্থানের অনুমতি দিতে পারেন, বা আপনি একটি নিখুঁত অবস্থান নির্দিষ্ট করতে পারেন এবং উপাদানটিকে তার পিতামাতা নির্বিশেষে কোনও নির্দিষ্ট অবস্থানে উপস্থিত হতে বাধ্য করতে পারেন। আপনি যদি একেবারে অবস্থানযুক্ত উপাদানটির পর্দার ডানদিকে উপস্থিত হতে চান position: absolute; right: 0;তবে আপনি ব্যবহার করতে পারেন তবে এর পিতামাতা কত প্রশস্ত তা বিবেচনা না করেই উপাদানটি সর্বদা পর্দার ডান প্রান্তে উপস্থিত হতে পারে div(সুতরাং এটি জিতেছে ' t "তার পিতামাতার বিভাজনের ডানদিকে" থাকুন)।

Comments

পিতা বা মাতা যদি divহয় position: relative, এই divবরং পর্দা চেয়ে যে পিতা বা মাতা এর ডান দিকে স্থান হবে।

— ট্রাইসিস

Answer 3

যদি আপনার পরম উপাদানটি " প্রদর্শন: ইনলাইন-ব্লক " হয় তবে আপনি " ট্রান্সলেটএক্স (-100%) " এবং " পাঠ্য-প্রান্তিককরণ: ডান " ব্যবহার করতে পারেন

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

আপনি পরম-উপাদানটি তার পিতামাতার ডান আত্মীয়ের সাথে প্রান্তিকৃত পাবেন

Answer 4

সম্ভবত আপনার সামগ্রী যেমন ভাসমান ব্যবহার করে ভাগ করা উচিত:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

লক্ষ্য করুন overflow: auto;, এটি আপনার ধারকটির কিছু উচ্চতা রয়েছে তা নিশ্চিত করা। কিছু ভাসমান DOM এর তাদের লাগে, তা নিশ্চিত করার জন্য আপনার উপাদানের নিচে আপনার বিচরণ ভাসে ওভারল্যাপ না, একটি ধারক সেট divকরার জন্য একটি overflow: auto(বা overflow: hidden) তা নিশ্চিত করার জন্য ভাসে যখন আপনার উচ্চতা অঙ্কনের জন্য দায়ী করা হয়। ফ্লোটগুলি এবং সেগুলি এখানে কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্য দেখুন ।

Answer 5

আমি নীড়ের এক স্তর এবং একটি কৌশলযুক্ত মার্জিন সহ পুরোপুরি একটি ডান-ভাসমান উপাদানকে অবস্থান করতে সক্ষম হয়েছি:

function test() {
  document.getElementById("box").classList.toggle("hide");
}

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

আমি এটিকে টগলযোগ্য করার সিদ্ধান্ত নিয়েছি যাতে আপনি এটি দেখতে পারেন যে এটি কীভাবে পার্শ্ববর্তী পাঠ্যের প্রবাহকে প্রভাবিত করে না (এটি চালান এবং ভাসমান পরম বাক্সটি দেখানোর / আড়াল করার জন্য বোতামটি টিপুন)।