డిహ్టీఎంఎల్ సిఎస్ఎస్ పోజిషనింగ్ (CSS-P)

CSS వినియోగిస్తారు హ్ట్మ్ల్ మెటాయిర్లకు స్టైల్స్ జోడించడానికి.

实例

ప్రకటన:大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

position:relative
ఈ కాలికిని దాని సాధారణ స్థానానికి సంబంధించి ఎలా స్థానం నిర్ణయించాలి.
position:relative
అన్ని హెడ్లను దాని సాధారణ స్థానానికి సంబంధించి ఎలా స్థానం నిర్ణయించాలి.
position:absolute
ఒక అబద్ధంగా ఒక కాలికి ఎలా నిర్ణయించాలి.

మరిన్ని ఉదాహరణలను పేజీ కింద కనుగొనవచ్చు.

ఏ లక్షణాలు CSS-Pతో కలిసి ఉపయోగించబడవచ్చు?

మొదటగా, ఈ కాలికికి position లక్షణం (relative లేదా absolute) నిర్దేశించాలి.

అప్పుడు, నేను క్రింది క్రియాశీల స్టైల్ లక్షణాలను అమర్చగలను:

  • 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 లక్షణాన్ని ఉపయోగించడానికి పరిణామం యొక్క వెడల్పును ఎప్పుడూ నిర్ణయించండి.

పైని ఉదాహరణలు కింది అవుట్‌పుట్ ను ఉత్పత్తి చేస్తాయి:

హెడర్

వివిధ ఫిల్టర్స్

ప్రకటన:అనుమానించకుండా బ్యాక్‌గ్రౌండ్-కలర్ లక్షణం పారదర్శకంగా సెట్ చేయబడితే కొన్ని ఫిల్టర్ లక్షణాలు పని చేయకూడదు!

లక్షణాలు పరిమితి వివరణ ఉదాహరణ
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 none పరిణామాలను అనువుగా చేయండి filter:fliph;
flipv none పరిణామాలను ఉన్నతిరుగుపెట్టండి filter:flipv;
glow
  • color
  • strength
 పరిణామాలను కాంతితో చేయండి 
filter:glow(
color=#ff0000,
strength=5);
gray none బ్లాక్ మరియు వెండి రంగులతో పరిణామాలను ప్రదర్శించండి filter:gray;
invert none పరిణామాలను మలచు రంగు మరియు ప్రకాశం విలువలతో ప్రదర్శించండి 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,
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
ఫిల్టర్ అట్రిబ్యూట్ వాడిన పేర్కాదు శైలి మార్చడానికి ఉపయోగించవచ్చు.
చిత్రాలపై ఫిల్టర్స్
ఫిల్టర్ అట్రిబ్యూట్ కూడా చిత్రాలపై వాడవచ్చు, ఇక్కడ ఫిల్టర్ అట్రిబ్యూట్ వాడబడిన చిత్రాల ఉన్నాయి.
వాటర్‌మార్క్
పేజీ స్క్రోల్ అయినప్పుడు బ్యాక్గ్రౌండ్ చలించదు.