CSS waddo waren.. position problem

nfs · Dec 3, 2013

machan CSS wala

position:relative;

kiyala dana ekei

position:absolute;

kiyala dena ekei wenasa mokak da? :eek:

mekai ban seen eka.

machan mama H kiyana block ekata position:absolute; kiyala dammama oya 1st pic eke thiyena widihatai enne, eth mama e position:absolute kiyana eka position:relative; kiyala wenas karama menna me widihata (2 weni pic eke) widihata enawa. mata balanna oni relative eka baluwe kage idanda kiyala

menna code ekath,

stylesheet eka

HTML:

 background-color:red;
 position:absolute;
 top:330px;
 left:680px;
}

#g
{width:150px;
 height:150px;
 background-color:red;
 position:absolute;
 top:490px;
 left:680px;
}

#h
{width:500px;
 height:100px;
 background-color:red;
 position:relative;
 left:170px;
 top:780px;
}

html file eka

HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="TextFile1.css" />


</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
    <div id="e"></div>
    <div id="f"></div>
    <div id="g"></div>
    <div id="h"></div>




</body>



</html>

sw7x · Dec 3, 2013

mage hithe thiyenawa a wunaata mata eka kiyaaaganna bae ban

nfs · Dec 3, 2013

sw7x said:
mage hithe thiyenawa a wunaata mata eka kiyaaaganna bae ban

ekeka than wala ekeka widihata ban eka gana dila thiyenne, ekai ban kagen hari ahanna baluwe.. :baffled:

BruceWayne92 · Dec 3, 2013

nfs said:
machan CSS wala

position:relative;

kiyala dana ekei

position:absolute;

kiyala dena ekei wenasa mokak da?

මට තේරෙන විදියට නම් relative position එක කියන්නේ අදාළ එලමන්ට් එක ඒ එලමන්ට් එකේ සාමන්‍ය ස්ථානයට( එහෙම නැත්තම් ඔරිජිනල් ස්ථානය ...ehema නැත්තම් HTML Element එක කිසිම මොඩිෆිකේශන් එකකින් තොරව පවතින ස්ථානය )සාපෙක්ෂව වෙනස් කරන ස්තානය .
…
…Absolute position eka කියන්නේ එහෙම කිසිම සාපේක්ෂ බවක් නැහ .ඒ කියන්නේ අදාළ එලමන්ට් එකක ස්ථානය වෙනස් කරන්න අගයන් යොදා ස්ථානය වෙනස් වෙන්නේ ඒ එලමන්ට් එක කිසිම මොඩිෆිකේෂන් එකකින් තොරව පවතින ස්ථානයට අනුව නෙමේ .ea කියන්නේ මුල් ස්ථානයේ බල පෑමක් නැහැ

cj_shaf · Dec 3, 2013

https://www.google.lk/?gws_rd=cr&ei...tween position relative and position absolute

mottaya · Dec 3, 2013

relative kiyanne mokakhari element ekakata sapekshawa.
absolute kiyanne margin eke indan..
wenna ona..

nfs · Dec 3, 2013

BruceWayne92 said:
මට තේරෙන විදියට නම් relative position එක කියන්නේ අදාළ එලමන්ට් එක ඒ එලමන්ට් එකේ සාමන්‍ය ස්ථානයට( එහෙම නැත්තම් ඔරිජිනල් ස්ථානය ...ehema නැත්තම් HTML Element එක කිසිම මොඩිෆිකේශන් එකකින් තොරව පවතින ස්ථානය )සාපෙක්ෂව වෙනස් කරන ස්තානය .
…
…Absolute position eka කියන්නේ එහෙම කිසිම සාපේක්ෂ බවක් නැහ .ඒ කියන්නේ අදාළ එලමන්ට් එකක ස්ථානය වෙනස් කරන්න අගයන් යොදා ස්ථානය වෙනස් වෙන්නේ ඒ එලමන්ට් එක කිසිම මොඩිෆිකේෂන් එකකින් තොරව පවතින ස්ථානයට අනුව නෙමේ .ea කියන්නේ මුල් ස්ථානයේ බල පෑමක් නැහැ

position:relative වල,
ඒ එලමන්ට් එකේ "සාමන්‍ය ස්ථානය" කියලා කිව්වේ මොකක් ගැනද?

nfs · Dec 3, 2013

cj_shaf said:
https://www.google.lk/?gws_rd=cr&ei...tween position relative and position absolute

ohoma baluwa ban. hariyata click une na eth :sorry:

mottaya said:
relative kiyanne mokakhari element ekakata sapekshawa.
absolute kiyanne margin eke indan..
wenna ona..

e kiwwe machan api

<span style="position:fixed; left:10px;">Test</span>

<span style="position:relative; left:20px;">elakiri.com</span>

dunnoth relative eka apply wenne fixed kiyana ekata passeda?

Ayeshlive · Dec 3, 2013

Position: absolute elements position wenne parent position:relative element eke left top corner ekata wenna. e position:relative element eka athule position:absolute elements keeyak thibunath e okkoma ekak uda ekak widihata thamai set wenne. position:relative thamai normal behavior eka. elements ekak uda ekak yanne na.

position:absolute elements wala order eke set wenne z-index property eken. z-index:1 element ekata udin z-index:L 5 element eka place wenawa, likewise.

nfs · Dec 3, 2013

Ayeshlive said:
Position: absolute elements position wenne parent position:relative element eke left top corner ekata wenna. e position:relative element eka athule position:absolute elements keeyak thibunath e okkoma ekak uda ekak widihata thamai set wenne. position:relative thamai normal behavior eka. elements ekak uda ekak yanne na.

position:absolute elements wala order eke set wenne z-index property eken. z-index:1 element ekata udin z-index:L 5 element eka place wenawa, likewise.

machan post eka update kara. tikak eka balanna puluwanda?

web_designer_619 · Dec 3, 2013

machan meka kiyola balapan,
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

M E T H · Dec 3, 2013

Ayeshlive said:
Position: absolute elements position wenne parent position:relative element eke left top corner ekata wenna. e position:relative element eka athule position:absolute elements keeyak thibunath e okkoma ekak uda ekak widihata thamai set wenne. position:relative thamai normal behavior eka. elements ekak uda ekak yanne na.

position:absolute elements wala order eke set wenne z-index property eken. z-index:1 element ekata udin z-index:L 5 element eka place wenawa, likewise.

මේ කියල දීල තියෙන්නේ ලස්සනට... :yes:

M E T H · Dec 3, 2013

මට බන් ඕක සිංහලෙන් කොටල පැහැදිලි කරල දෙන්න අමාරුයි... :oo:

මම පොඩි කෝඩ් කෑල්ලක් ගැහැව මේකේ තියෙන වෙනස්කම් තේරුම් අරන් මේක තේරුම් ගන්න බලපන්.. උබ පිංතූර දාල දෙයක් ඉගෙන ගන්න කැපවීමෙන් දඟලන විදිය දැකපු නිසයි මේක දාන්නනේ..

Code:

<html>
<head>
<style>
.float_left{float:left}
.common_width_n_height{ width:200px; height:200px; background:red; position:relative;}
#wrapper { width:600px; height:auto; background:green}
.small_box{ width:50px; height:50px; [COLOR="Red"]position:relative;[/COLOR] background:blue;}

.left_top{ left:0; top:0}
.left_bottom{ left:0; bottom:0}
.right_top{ right:0; top:0}
.right_bottom{ right:0; bottom:0}
</style>
</head>

<body>

<div id="wrapper" class="float_left">
<div class="common_width_n_height float_left"></div>
<div class="common_width_n_height float_left"></div>
<div class="common_width_n_height float_left">
	<div class="small_box left_top"></div>
    <div class="small_box left_bottom"></div>
    <div class="small_box right_top"></div>
    <div class="small_box right_bottom"></div>
</div>
</div>

</body>
</html>

--------------------

Code:

<html>
<head>
<style>
.float_left{float:left}
.common_width_n_height{ width:200px; height:200px; background:red; position:relative;}
#wrapper { width:600px; height:auto; background:green}
.small_box{ width:50px; height:50px; [COLOR="Red"]position:absolute;[/COLOR] background:blue;}

.left_top{ left:0; top:0}
.left_bottom{ left:0; bottom:0}
.right_top{ right:0; top:0}
.right_bottom{ right:0; bottom:0}
</style>
</head>

<body>

<div id="wrapper" class="float_left">
<div class="common_width_n_height float_left"></div>
<div class="common_width_n_height float_left"></div>
<div class="common_width_n_height float_left">
	<div class="small_box left_top"></div>
    <div class="small_box left_bottom"></div>
    <div class="small_box right_top"></div>
    <div class="small_box right_bottom"></div>
</div>
</div>

</body>
</html>

ඔය රතුපාටින් හයිලයිට් කරපු එකේ වෙනස් කම මත වෙන වෙනස අනුව ඔය දේ තේරුම් ගනින්...

BruceWayne92 · Dec 3, 2013

nfs said:
position:relative වල,
ඒ එලමන්ට් එකේ "සාමන්‍ය ස්ථානය" කියලා කිව්වේ මොකක් ගැනද?

ඒ කිව්වේ උඹ අපි හිතමු .Header (h1,h2,h3,etc...)එකක් හැදුව කියමු .ඒ හෙඩර් එක තියෙන HTML ෆිලෙ එක නොමල් රන් කරපුවහම බ්‍රව්සර් එකේ දි ඒ හෙඩර් ekea ලියලා තියෙන දේ පේනවනේ .අන්න් ඒ පේන ස්ථානය තමා සාමන්‍ය් ස්ථානය කියන්නේ :yes:

මේ කොඩ් එක ගැන හිතන්න ....

Code:

<!DOCTYPE html>
<html>
<head>



<body>
<h2>This is a heading with an absolute position</h2>

</body>

</html>

මේ කෝඩ් එක රන් කරාහාම එන අවුට් පුට් එකෙන් ලැබෙනවානේ හෙඩර් එකට ස්ථානයක් .අන්න ඒ ස්ථානය තමා සාමාන්‍ය ස්ථානය කියන්නේ :yes:

dgvirajm · Dec 3, 2013

BumP!

පැටියා · Dec 4, 2013

දන්න විදියට කියන්නම්. සමහර විට වැරදි ඇති.

අපි පේජ් එකක් ඩිසයින් කරද්දි මුලින් මේන් div එකක් දාගන්නවනෙ.
ඒක ඇතුලෙනෙ දාන සෙල්ලං දාන්නෙ.

ඔය වගේ හැම එන div එකක් ඇතුලෙම තව ඕන තරං div දාගන්න පුලුවන්.

Relative කියන්නෙ අපි ඒ ගත්ත div එක ඊට පිටින් තියන parent div එකේ හැසිරීමට relatively වෙනස් වෙන විදියට දාන එක.

Absolute කියන්නෙ Regardless of the parent div අපිට ඕනෙ div එක අපිට ඕනෙ විදියට තියාගන්න එක.

ඒ ඒ අවස්ථාවට හරි යන විදියට ඒක යොදාගන්න ඕනෙ.

Responsive design එකක් නම් ගොඩක් දුරට Relative තමා ගන්න ඕනෙ. :yes:

nfs · Dec 4, 2013

web_designer_619 said:
machan meka kiyola balapan,
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

M E T H said:
මේ කියල දීල තියෙන්නේ ලස්සනට...

M E T H said:
මට බන් ඕක සිංහලෙන් කොටල පැහැදිලි කරල දෙන්න අමාරුයි... මම පොඩි කෝඩ් කෑල්ලක් ගැහැව මේකේ තියෙන වෙනස්කම් තේරුම් අරන් මේක තේරුම් ගන්න බලපන්.. උබ පිංතූර දාල දෙයක් ඉගෙන ගන්න කැපවීමෙන් දඟලන විදිය දැකපු නිසයි මේක දාන්නනේ..

Code:

<html> <head> <style> .float_left{float:left} .common_width_n_height{ width:200px; height:200px; background:red; position:relative;} #wrapper { width:600px; height:auto; background:green} .small_box{ width:50px; height:50px; [COLOR=Red]position:relative;[/COLOR] background:blue;} .left_top{ left:0; top:0} .left_bottom{ left:0; bottom:0} .right_top{ right:0; top:0} .right_bottom{ right:0; bottom:0} </style> </head> <body> <div id="wrapper" class="float_left"> <div class="common_width_n_height float_left"></div> <div class="common_width_n_height float_left"></div> <div class="common_width_n_height float_left"> <div class="small_box left_top"></div> <div class="small_box left_bottom"></div> <div class="small_box right_top"></div> <div class="small_box right_bottom"></div> </div> </div> </body> </html>

--------------------

Code:

<html> <head> <style> .float_left{float:left} .common_width_n_height{ width:200px; height:200px; background:red; position:relative;} #wrapper { width:600px; height:auto; background:green} .small_box{ width:50px; height:50px; [COLOR=Red]position:absolute;[/COLOR] background:blue;} .left_top{ left:0; top:0} .left_bottom{ left:0; bottom:0} .right_top{ right:0; top:0} .right_bottom{ right:0; bottom:0} </style> </head> <body> <div id="wrapper" class="float_left"> <div class="common_width_n_height float_left"></div> <div class="common_width_n_height float_left"></div> <div class="common_width_n_height float_left"> <div class="small_box left_top"></div> <div class="small_box left_bottom"></div> <div class="small_box right_top"></div> <div class="small_box right_bottom"></div> </div> </div> </body> </html>

ඔය රතුපාටින් හයිලයිට් කරපු එකේ වෙනස් කම මත වෙන වෙනස අනුව ඔය දේ තේරුම් ගනින්...

thanks machan.. wade goda.....

BruceWayne92 said:
ඒ කිව්වේ උඹ අපි හිතමු .Header (h1,h2,h3,etc...)එකක් හැදුව කියමු .ඒ හෙඩර් එක තියෙන HTML ෆිලෙ එක නොමල් රන් කරපුවහම බ්‍රව්සර් එකේ දි ඒ හෙඩර් ekea ලියලා තියෙන දේ පේනවනේ .අන්න් ඒ පේන ස්ථානය තමා සාමන්‍ය් ස්ථානය කියන්නේ
මේ කොඩ් එක ගැන හිතන්න ....

Code:

<!DOCTYPE html> <html> <head> <body> <h2>This is a heading with an absolute position</h2> </body> </html>

මේ කෝඩ් එක රන් කරාහාම එන අවුට් පුට් එකෙන් ලැබෙනවානේ හෙඩර් එකට ස්ථානයක් .අන්න ඒ ස්ථානය තමා සාමාන්‍ය ස්ථානය කියන්නේ

thanks machan... elakiri..

dgvirajm said:
BumP!

පැටියා;15977721 said:
දන්න විදියට කියන්නම්. සමහර විට වැරදි ඇති.

අපි පේජ් එකක් ඩිසයින් කරද්දි මුලින් මේන් div එකක් දාගන්නවනෙ.
ඒක ඇතුලෙනෙ දාන සෙල්ලං දාන්නෙ.

ඔය වගේ හැම එන div එකක් ඇතුලෙම තව ඕන තරං div දාගන්න පුලුවන්.

Relative කියන්නෙ අපි ඒ ගත්ත div එක ඊට පිටින් තියන parent div එකේ හැසිරීමට relatively වෙනස් වෙන විදියට දාන එක.

Absolute කියන්නෙ Regardless of the parent div අපිට ඕනෙ div එක අපිට ඕනෙ විදියට තියාගන්න එක.

ඒ ඒ අවස්ථාවට හරි යන විදියට ඒක යොදාගන්න ඕනෙ.

Responsive design එකක් නම් ගොඩක් දුරට Relative තමා ගන්න ඕනෙ.

thanks machan... :yes:

mottaya said:
relative kiyanne mokakhari element ekakata sapekshawa.
absolute kiyanne margin eke indan..
wenna ona..

thanks machan...

Ayeshlive said:
Position: absolute elements position wenne parent position:relative element eke left top corner ekata wenna. e position:relative element eka athule position:absolute elements keeyak thibunath e okkoma ekak uda ekak widihata thamai set wenne. position:relative thamai normal behavior eka. elements ekak uda ekak yanne na.

position:absolute elements wala order eke set wenne z-index property eken. z-index:1 element ekata udin z-index:L 5 element eka place wenawa, likewise.

thanks machan......

djjaya said:
bump

thanks wewa......

BruceWayne92 said:
මට තේරෙන විදියට නම් relative position එක කියන්නේ අදාළ එලමන්ට් එක ඒ එලමන්ට් එකේ සාමන්‍ය ස්ථානයට( එහෙම නැත්තම් ඔරිජිනල් ස්ථානය ...ehema නැත්තම් HTML Element එක කිසිම මොඩිෆිකේශන් එකකින් තොරව පවතින ස්ථානය )සාපෙක්ෂව වෙනස් කරන ස්තානය .
…
…Absolute position eka කියන්නේ එහෙම කිසිම සාපේක්ෂ බවක් නැහ .ඒ කියන්නේ අදාළ එලමන්ට් එකක ස්ථානය වෙනස් කරන්න අගයන් යොදා ස්ථානය වෙනස් වෙන්නේ ඒ එලමන්ට් එක කිසිම මොඩිෆිකේෂන් එකකින් තොරව පවතින ස්ථානයට අනුව නෙමේ .ea කියන්නේ මුල් ස්ථානයේ බල පෑමක් නැහැ

aha.. ela machan.......

cj_shaf said:
https://www.google.lk/?gws_rd=cr&ei...tween position relative and position absolute

ela...

NO_MeRcY · Dec 4, 2013

සරළවම කිව්වොත්

Relative එකේ දි වෙන්නේ උබ css මුලින් කරන්න කලින් ඒ element එක තිබ් බ Position එකට සාපේක්ශව තමයි style කරද්දි element එක move වෙන්නේ. එ කියන්නෙ උබ <div> එකක් Relative දාල style කලොත්. මුලින් දැම්ම <div> එකම මුලින් තිබ්බ තැන ඉදන් තමයි move වෙන්නේ

Absolute එකේදි ඒ element එක අලුතෙන් place කරනවා උබ කරන style එකට අනුව. මුල් Position එකට සාපෙක්ශව move වෙන්නේ නෑ.

example ටිකක් කරල බලපන් මල්ලී. උබට තේරේවි

meka balapan mallie http://www.barelyfitz.com/screencast/html-training/css/positioning/

nfs · Dec 4, 2013

djjaya said:
bump

thanks..

NO_MeRcY said:
සරළවම කිව්වොත්

Relative එකේ දි වෙන්නේ උබ css මුලින් කරන්න කලින් ඒ element එක තිබ් බ Position එකට සාපේක්ශව තමයි style කරද්දි element එක move වෙන්නේ. එ කියන්නෙ උබ <div> එකක් Relative දාල style කලොත්. මුලින් දැම්ම <div> එකම මුලින් තිබ්බ තැන ඉදන් තමයි move වෙන්නේ

Absolute එකේදි ඒ element එක අලුතෙන් place කරනවා උබ කරන style එකට අනුව. මුල් Position එකට සාපෙක්ශව move වෙන්නේ නෑ.

example ටිකක් කරල බලපන් මල්ලී. උබට තේරේවි

meka balapan mallie http://www.barelyfitz.com/screencast/html-training/css/positioning/

thanks machan.. elazzz

CSS waddo waren.. position problem

Well-known member

Well-known member

Well-known member

Well-known member

Junior member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Member

Active member

Active member

Well-known member

Well-known member

Member

Well-known member

Well-known member

Well-known member

Similar threads