DHTML CSS Positioning (CSS-P)

CSS 用于为 HTML 元素添加样式。

উদাহরণ

মন্তব্য:অধিকাংশ DHTML উদাহরণগুলির জন্য IE 4.0+、Netscape 7+ বা Opera 7+ প্রয়োজন

position:relative
কিভাবে ইউনিটকে তার স্বাভাবিক অবস্থানের ভিত্তিতে স্থাপন করা যায়?
position:relative
কিভাবে সমস্ত শিরোনামকে তাদের স্বাভাবিক অবস্থানের ভিত্তিতে স্থাপন করা যায়?
position:absolute
কিভাবে একটি অবস্থানকে ইউনিটকে সংজ্ঞায়িত করা যায়?

পানের নিচে আরও উদাহরণ পাবেন।

কোনও প্রতিযোগীতা কিভাবে CSS-P-র সঙ্গে ব্যবহার করা যায়?

প্রথমে, এই ইউনিটকে position প্রতিযোগীতা (relative বা absolute) সংজ্ঞায়িত করতে হবে。

তারপর, আমি নিম্নলিখিত CSS-P প্রতিযোগীতা সংজ্ঞায়িত করতে পারব।

  • left - ইউনিটের বামদিকের অবস্থান
  • top - ইউনিটের শীর্ষ অবস্থান
  • visibility - ইউনিটকে দৃশ্যমান কিংবা অদৃশ্য করা হবে
  • z-index - ইউনিটের স্থাপন ক্রম
  • clip - ইউনিট কাটা
  • overflow - অতিরিক্ত কনটেন্ট কিভাবে হস্তক্ষেপ করা হবে

Position

CSS-এর position প্রতিযোগীতা ইউনিটকে ডকুমেন্টের মধ্যে কোনও ইউনিটকে স্থাপন করতে দেয়।

position:relative

position:relative প্রতিযোগীতা ইউনিটকে তার স্বাভাবিক অবস্থানের ভিত্তিতে স্থাপন করতে পারে।

উপরোক্ত উদাহরণটি এই div ইউনিটকে তার স্বাভাবিক অবস্থানের ডানদিকে 10 পিক্সেল দূরত্বে স্থাপন করেছে:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute প্রতিযোগীতা ইউনিটকে উপস্থাপনার দূরত্ব অনুযায়ী স্থাপন করে।

উপরোক্ত উদাহরণটি এই div ইউনিটকে তার মাউন্ট ব্লকের বামদিকের মার্গের ডানদিকে 10 পিক্সেল দূরত্বে স্থাপন করেছে:

div
{
position:absolute;
left:10;
}

Visibility

visibility প্রতিযোগীতা ইউনিটকে দৃশ্যমান কিংবা অদৃশ্য করতে নির্ধারণ করে।

visibility:visible

visibility:visible প্রতিযোগীতা ইউনিটকে দৃশ্যমান করতে দেয়।

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden প্রতিযোগীতা ইউনিটকে অদৃশ্য করতে দেয়।

h1
{
visibility:hidden;
}

Z-index

z-index প্রতিযোগীতা একটি ইউনিটকে অন্যটির পরে স্থাপন করতে ব্যবহৃত হয়। z-index-এর ডিফল্ট মান 0। মানটি উচ্চতর, তাহলে প্রাথমিকতা উচ্চতর। z-index: -1 নিম্নতর প্রাথমিকতা।

h1
{
z-index:1;
}
h2
{
z-index:2;
}

উপরোক্ত উদাহরণে, যদি h1 এবং h2 একে অপরের উপর সুস্থাপিত হয়, তবে h2 ইউনিট হ1 ইউনিটের উপর থাকবে。

Filters

filter প্রতিযোগীতা প্রদান করে টেক্সট এবং চিত্রকে আরও শৈলীগত প্রভাব যোগ করতে দেয়।

h1
{
width:100%;
filter:glow;
}

মন্তব্য:filter প্রতিভূতি ব্যবহার করতে, এলিমেন্টের প্রশস্ততা নির্ধারণ করুন

উপরোক্ত উদাহরণটি নিচের আউটপুট উৎপন্ন করে:

হেডার

বিভিন্ন ফিল্টার

মন্তব্য:প্রত্যেকটি ফিল্টার প্রতিভূতির background-color প্রতিভূতি স্বচ্ছ হলেও কিছু ফিল্টার প্রতিভূতি কাজ করবে না!

প্রতিভূতি পারামিটার বর্ণনা উদাহরণ
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 এলিমেন্টের স্বচ্ছতা নির্ধারণ করুন 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 এলিমেন্টকে ঝলকচ্ছিন্ন করুন 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color নির্দিষ্ট রঙকে স্বচ্ছ করুন 
filter:chroma(
color=#ff0000)
fliph xray এলিমেন্টকে ডান দিকে পরিবর্তিত করুন filter:fliph;
flipv xray এলিমেন্টকে উপরে দিকে পরিবর্তিত করুন filter:flipv;
glow
  • color
  • strength
 এলিমেন্টকে আলোকমান করুন 
filter:glow(
color=#ff0000,
strength=5);
gray xray এলিমেন্টকে সাদা এবং কালো রঙে প্রদর্শিত করুন filter:gray;
invert xray এলিমেন্টকে পরিবর্তিত রঙ এবং আলোকমান মানের ব্যবহার করে প্রদর্শিত করুন filter:invert;
mask color নির্দিষ্ট পটভূমির রঙ এবং স্বচ্ছ অগ্রভূমির রঙ সহ এলিমেন্ট প্রদর্শিত করুন 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 শাড়া সহ এলিমেন্ট প্রদর্শিত করুন 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 শাড়া সহ এলিমেন্ট প্রদর্শিত করুন 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 এলিমেন্টকে তরঙ্গাকৃতির মধ্যে প্রদর্শিত করুন 
filter:wave(
add=true,
freq=1,
lightstrength=3,
lightstrength=3,
phase=0,
strength=5) xray none কালো এবং সাদা রঙে রূপান্তরিত এবং আলোকমান মান সহ উপাদান দেখান

filter:xray;

Background

background প্রক্রিয়াটি আপনাকে নিজস্ব পটভূমি ব্যবহার করতে দেয়

background-attachment:scroll

background-attachment:fixed

পটভূমি পানের স্ক্রোল সঙ্গে স্থানান্তরিত হবে না

আরও উদাহরণ

Visibility
কিভাবে একটি উপাদানকে অদৃশ্য করা যায়। আপনি এই উপাদানকে দেখতে চান কি না?
Z-index
Z-index-এর মাধ্যমে একটি উপাদানকে অন্য উপাদানের পরে রাখা যায়, Z-index ক্রম ব্যবহার করে
Z-index
দেখুন, উপাদানের Z-index ক্রম পরিবর্তিত হয়েছে
Cursors
CSS দ্বারা মাউস পিন্টারের শৈলী পরিবর্তন করুন
Filters
filter প্রক্রিয়াটি ব্যবহার করে শিরোনামের শৈলী পরিবর্তন করুন
Filters on Images
filter প্রক্রিয়াটি ছবিতেও প্রয়োগ করা যেতে পারে, এখানে filter প্রক্রিয়াটি প্রয়োগ করা হওয়া একটি ছবির উদাহরণ আছে。
Watermark
পানের স্ক্রোল করার সময় ব্যাকগ্রাউন্ড ছবিটি স্থানান্তরিত হবে না。