উপরের ডানদিকে একটি চিত্র স্থাপন - সিএসএস

Question

আমাকে একটি ডিভের উপরের-ডান কোণে একটি চিত্র প্রদর্শন করতে হবে (চিত্রটি "তির্যক" ফিতা) তবে বর্তমান পাঠ্যটিকে অভ্যন্তরীণ ডিভের মধ্যে রেখে যেমন তার শীর্ষে আটকে রয়েছে keeping

আমি অন্য ডিভের সাথে চিত্রটি অন্তর্ভুক্ত করা বা এর শ্রেণি সংজ্ঞা দেওয়ার মতো বিভিন্ন বিষয় চেষ্টা করেছি:

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

তবে কোনও ভাগ্য ছাড়াই আমি যে সর্বোত্তম ফলাফল পেয়েছি তা হ'ল চিত্রের একই উচ্চতার আকারের জন্য সমস্ত পাঠ্য স্ক্রোল করে।

কোন ধারণা?

Comments

প্রস্তাবিত পাঠ: ALA: সিএসএস পজিশনিং 101 এবং ALA: সিএসএস Floats 101 ।

— jensgram

Answer 1

আপনি কেবল এটির মতো এটি করতে পারেন:

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>

Answer 2

অবস্থান ঠিক divঅপেক্ষাকৃত, এবং এটি ভিতরে একেবারে পটি অবস্থান। কিছুটা এইরকম:

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

Answer 3

একই সমস্যাটি দেখার সময় আমি একটি উদাহরণ পেয়েছি

<style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

এখানে কৌশলটি একটি ছোট, (আমি জিম্প ব্যবহার করেছি) একটি পিএনজি (বা জিআইএফ) তৈরি করেছি যা স্বচ্ছ পটভূমি রয়েছে, (এবং তারপরে কেবল বিপরীত নীচের কোণটি মুছুন))