এইচটিএমএলতে আমি অন্য চিত্রের উপরে কীভাবে অবস্থান করব?

Question

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

আমি কেবল একে অপরের সাথে সম্পর্কিত ওভারল্যাপিং চিত্রগুলি রাখতে চাই।

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

Comments

আপনি স্প্রাইট ব্যবহার করে একটি চিত্র দিয়ে ওডোমিটারটি করতে পারেন

— জেসন

Answer 1

ঠিক আছে, কিছু সময়ের পরে, আমি এখানে অবতরণ করেছি:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

সহজ সমাধান হিসাবে। এটাই:

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

Comments

এটি একটি মার্জিত সমাধান। যদি "একটি" এর একটি আইডি ছিল aএবং "B" ছিল একটি আইডি b, পারে এই জাভাস্ক্রিপ্ট কোড (সেটিং xএবং yকিছু হিসাব করে) পদে পরিবর্তন করার জন্য কাজ b?

— DDPWNAGE

বাম: 0 খুব গুরুত্বপূর্ণ! এটি ভুলে গেছেন এবং এটি সাফারি তে কাজ করে নি। এটি বের করতে আমাকে কিছুক্ষণ সময় লাগল।

— মারাকুজা-রস

কোড স্নিপেট চলাকালীন, একটি চিত্র অন্যটির উপরে প্রদর্শিত হয় না।

— kojow7

@ কোজো 7 অন্যটির উপরে তাদের দেখানোর জন্য কোড স্নিপেট সবেমাত্র আপডেট করেছে। :-)

— ক্রেিগো

@ মে_ডিভলপার আপনি এটি এইভাবে করবেন না। আপনি অটো মার্জিন ব্যবহার করবেন। w3schools.com/howto/howto_css_image_center.asp

— ক্রেিগো

Answer 2

এটি অন্য একটি চিত্র যা আমি অন্য চিত্রের উপরে ভাসতে কি করেছি at

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

উৎস

Answer 3

এখানে কোড যা আপনাকে ধারণা দিতে পারে:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

আমি সন্দেহ করি যে এস্পোর সমাধানটি অসুবিধাজনক হতে পারে কারণ এটি আপনাকে উভয় চিত্র একেবারে স্থিত করে নেওয়া দরকার। আপনি প্রথমে প্রবাহে নিজেকে অবস্থান করতে চান।

সাধারণত, সিএসএস করার একটি প্রাকৃতিক উপায় রয়েছে। আপনি পজিশনটি রাখুন: ধারক উপাদানটির সাথে সম্পর্কিত এবং তারপরে একেবারে শিশুদের অবস্থান দিন children দুর্ভাগ্যক্রমে, আপনি একটি চিত্র অন্যটির মধ্যে রাখতে পারবেন না। এজন্য আমার কনটেইনার ডিভ দরকার ছিল। লক্ষ্য করুন যে আমি এটিকে এর সামগ্রীগুলিতে স্বতঃফিট করতে এটি একটি ভাসা তৈরি করেছি। এটিকে প্রদর্শন করা: তাত্ত্বিকভাবে ইনলাইন-ব্লকটিও কাজ করা উচিত, তবে ব্রাউজার সমর্থনটি সেখানে খুব কম।

সম্পাদনা: আমি আমার পয়েন্টটি আরও ভালভাবে চিত্রিত করতে চিত্রগুলি থেকে আকারের বৈশিষ্ট্যগুলি মুছলাম। আপনি যদি ধারক ইমেজটির ডিফল্ট আকার ধারণ করতে চান এবং আপনি আকারটি আগেই জানেন না তবে আপনি ব্যাকগ্রাউন্ড ট্রিকটি ব্যবহার করতে পারবেন না । আপনি যদি করেন তবে এটি যাওয়ার আরও ভাল উপায়।

Comments

এটি আমার পক্ষে সেরা সমাধান কারণ আপনার চিত্রগুলির প্রস্থ এবং উচ্চতা নির্দিষ্ট করার দরকার নেই এবং এর ফলে আরও অনেক বেশি পুনরায় ব্যবহারের যোগ্যতা তৈরি হবে।

— ইমান মোহামাদি

Answer 4

একটি সমস্যা আমি লক্ষ্য করেছি যে ত্রুটিগুলি ঘটাতে পারে তা হ'ল রিচটারের উত্তরে নীচের কোডটি:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

যেমন শৈলীর মধ্যে px ইউনিট অন্তর্ভুক্ত করা উচিত।

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

তা ছাড়া, উত্তরটি ঠিক কাজ করেছিল। ধন্যবাদ।

Answer 5

আপনি সম্পূর্ণরূপে pseudo elementsতাদের পিতামাত উপাদান তুলনায় অবস্থান করতে পারেন ।

এটি আপনাকে প্রতিটি উপাদানের সাথে খেলতে দুটি অতিরিক্ত স্তর দেয় - সুতরাং একটি চিত্রের অপর উপরে অবস্থিত করা সহজ হয়ে যায় - ন্যূনতম এবং শব্দার্থিক মার্কআপ সহ (খালি ডিভগুলি নয়)।

মার্কআপ:

<div class="overlap"></div>

CSS:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

এখানে একটি লাইভ ডেমো রয়েছে

Answer 6

এটি করার সহজ উপায় হ'ল ব্যাকগ্রাউন্ড-ইমেজ ব্যবহার করা তবে সেই উপাদানটিতে একটি <img> রাখুন put

অন্য উপায়টি হ'ল CSS স্তরগুলি ব্যবহার করা। এটির জন্য আপনাকে সাহায্য করার জন্য একটি টন সংস্থান রয়েছে, কেবল CSS স্তরগুলি অনুসন্ধান করুন ।

Answer 7

এখানে স্পষ্টতার জন্য ইনলাইন শৈলী। একটি আসল সিএসএস স্টাইলশিট ব্যবহার করুন।

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

Answer 8

এটি কিছুটা দেরিতে হতে পারে তবে এর জন্য আপনি এটি করতে পারেন:

এইচটিএমএল

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

Sass

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

Answer 9

@ বুটি-অক্সা: পেডেন্টিক হতে হবে না তবে আপনার কোডটি অবৈধ। এইচটিএমএল widthএবং heightবৈশিষ্ট্যগুলি ইউনিটগুলির জন্য অনুমতি দেয় না; আপনি সম্ভবত সিএসএস width:এবং height:বৈশিষ্ট্যগুলি নিয়ে ভাবছেন । আপনি ট্যাগ text/cssসহ একটি সামগ্রী-প্রকার ( ; এস্পোর কোড দেখুন) সরবরাহ করতে হবে <style>।

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

এবং বৈশিষ্ট্যগুলি ছেড়ে px;যাওয়ার ফলে একটি রেন্ডারিং ইঞ্জিন ঝাঁকুনিতে ডেকে আনেwidthheight

Answer 10

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

Comments

আমি মনে করি যে কোনও সম্ভাব্য কোডের নমুনা এই উত্তরটির ভবিষ্যতের পাঠকদের সহায়তা করতে পারে।

— entpnerd