আপনি কীভাবে দুটি <ডিভি> এর ওভারল্যাপ তৈরি করবেন?

Question

কিছুটা দেখতে দেখতে আমার দুটি ডিভ দরকার:

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

এগুলিকে ঝরঝরে করে ওভারল্যাপ করার সবচেয়ে নেটেস্ট / সবচেয়ে মার্জিত উপায় কী? লোগোটির একটি নির্দিষ্ট উচ্চতা এবং প্রস্থ থাকবে এবং পৃষ্ঠার শীর্ষ প্রান্তটি স্পর্শ করবে।

Answer 1

আমি এটির মতো (সিএসএস এবং এইচটিএমএল) যোগাযোগ করতে পারি:

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; /* Reposition logo from the natural layout */
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; /* Provide buffer for logo */
}
#links {
  height: 75px;
  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}

<div id="logo">
  <img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Comments

লোগো দ্বারা ব্যবহৃত স্থানটিকে এড়িয়ে চলা বিষয়বস্তু তৈরি করার কোনও উপায় আছে?

— জাভিয়ের

হুম আপনি কি স্পষ্ট করতে পারেন? আমি এটি বোঝাতে চাই যে আপনি কেবল সামগ্রীর উপরে লোগো চান? যদি তাই হয় তবে এটি কেবল ডিভসের একটি সাধারণ প্রবাহ (তাই # লোগো থেকে বাম, শীর্ষ, অবস্থান সরিয়ে ফেলুন)। আমি বোধ করছি আপনি অন্য কিছু মানে যদিও! :)

— ওভেন

আমি মনে করি লোগোটির চারপাশে বিষয়বস্তু (পাঠ্য) মোড়ানো ছিল তা

— বোঝানোর জন্য

আহ হুম, আমি নিশ্চিত নই। উপাদান হিসাবে সমস্যাটি ভাসমান, বা অবস্থিত হতে পারে তবে উভয়ই নয়। যতক্ষণ না তারা কোনও ধরণের ভাসমান বিকাশ করে: কেন্দ্রের ধারণা ...

— ওভেন

Answer 2

দ্বিতীয় ভাগে কেবল নেতিবাচক মার্জিন ব্যবহার করুন:

<div style="margin-top: -25px;">

এবং আপনার যে লেয়ারিংটি চান তা পেতে জেড-ইনডেক্স সম্পত্তিটি সেট করার বিষয়টি নিশ্চিত করুন।

Comments

এটি এখন পর্যন্ত সবচেয়ে সহজ পদ্ধতি এবং কোনও পৃষ্ঠার সামগ্রীতে মার্জিন-নীচে ব্যবহার করে ওভারল্যাপিং পাদদেশগুলির জন্য সহজেই মানিয়ে নেওয়া যায়। ধন্যবাদ!

— পিটার ডিউইউজ

এই সমাধানটি DOCTYPE এর উপর নির্ভর করে বলে মনে হচ্ছে, তাই না? কারণ আমি চেষ্টা করার সময় এটি HTML5 ডক্টইপি সঙ্গে কাজ করে না।

— alumi

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, অবস্থানের নিখুঁত সমস্যা তৈরি করে।

— দিমিত্রি

Answer 3

পরম বা আপেক্ষিক অবস্থানের সাথে, আপনি সমস্ত ধরণের ওভারল্যাপিং করতে পারেন। আপনি সম্ভবত চান যে লোগোটি স্টাইল করা হোক:

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

দ্রষ্টব্য: নিরঙ্কুশ অবস্থানটির স্বতন্ত্রতা রয়েছে। আপনাকে সম্ভবত কিছুটা পরীক্ষা-নিরীক্ষা করতে হবে তবে আপনি যা চান তা করা খুব কঠিন হবে না।

Comments

লোগো যেখানে লিঙ্কগুলি রয়েছে সেখানে পাঠ্যকে ওভারল্যাপ করার কারণ হবে? অথবা এটি লিঙ্কগুলি পাশের দিকে ঠেলে দেবে?

না, পরম কার্যকরভাবে প্রবাহ থেকে ট্যাগটিকে সরিয়ে দেয়। মনে হবে যেন ওখানে নেই।

— sblundy

Answer 4

সিএসএস ব্যবহার করে আপনি লোগো ডিভকে পরম স্থানে স্থাপন করেছেন এবং জেড-অর্ডারটি দ্বিতীয় ডিভের উপরে রাখবেন।

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

Answer 5

আপনি যদি লোগোটি স্থান গ্রহণ করতে চান তবে আপনি সম্ভবত এটি বামে ভাসতে এবং তারপরে মার্জিন ব্যবহার করে সামগ্রীটি নীচে নিয়ে যাওয়া ভাল of

# লগো {
    ভাসা: বাম;
    মার্জিন: 0 10px 10px 20px;
}

# কনটেন্ট {
    মার্জিন: 10px 0 0 10px;
}

বা যাই হোক না কেন মার্জিন চাই