Praneškite apie mus:


CSS pozicijos

0

Su css kalba galime keisti elementų išdėstymo tvarką. Yra keturi pozicijų variantai: statiškas, reliatyvvus, fiksuotas arba absoliutus. Vieną iš jų reikia nurodyti kiekvienam elementui per parametrą position. Pradinė visu elementų parametro position reikšmė yra static.



 

Statinė pozicija - position: static;

Kai elementai yra position:static; jie yra atvaizduojami paprastai, tiesiog toje vietoje, kurioje jie yra html kode. Statinių elementų negalime paveikti papildomais pozicijos nustatymais tokiais kaip top, right, bottom, left, margin, padding. Su position:static; margin ir padding nustatymai veiks dalinai.

 

Reliatyvi pozicija - position: relative;

Kai elementas yra position:relative; jis yra realiatyvioje savo pozicijoje, tai yra be papildomų nustatymų tokioje pat kaip ir static, tačiau jei pridėsime kokį nors papildomą pozicijos nustatymą, jo pozicija realiatyviai pasikeis nuo pradinės, statinės pozicijos.

Jei reikia elementą galime pastumpti į kurią nors pusę su nustatymais top, right, bottom ar left. Jei reikia, galime juos lygiuoti per centrą, atitraukti nuo kraštų su parametrais margin ir padding.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* bendri nustatymai */
div {
width:200px;
height:35px;
position:relative;
line-height:35px;
text-align:center;
color: #fff;
}
 
/* individualus nustatymai */
 
div.pirmas{
background-color: #32c3ef;
left: 10px;
}
div.antras{
background-color: #ea4ce1;
left: -10px;
}
div.trecias{
background-color: #f00404;
}
div.ketvirtas{
background-color: #efe714;
top: 10px;
}
div.penktas{
background-color: #4d5575;
bottom: -5px;
left: 50px;
}
div.sestas{
background-color: #3de6bc;
margin: 0px auto;
}
 

pabandyk_pats

 

Fiksuota pozicija - position:fixed;

Kai elementas yra fiksuotas, tada kur nurodysime jo vietą su papildomais parametrais, ten jis ir bus. Tokiu būdu galime sukurti elementus, kurie yra matomi visada, nepaisant ar puslapis telpa į naršyklės langą, ar atsiranda slinkties juostos.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* bendri nustatymai */
div {
width:200px;
height:50px;
position:fixed;
line-height:50px;
font-size: 15px;
text-align:center;
font-weight: bold;
color: #000;
opacity: 0.5;
filter:alpha(opacity=50);
}
 
/* individualus nustatymai */
 
div.pirmas{
background-color: #32c3ef;
left: 30px;
top: 120px;
}
div.antras{
background-color: #ea4ce1;
right: 10px;
top: 200px;
}
div.trecias{
background-color: #f00404;
}
div.ketvirtas{
background-color: #efe714;
top: 10px;
right: 10px;
}
div.penktas{
background-color: #4d5575;
bottom: 10px;
left: 10px;
}

pabandyk_pats

 

Absoliuti pozicija - position: absolute;

Elementai su absoliučia pozicija yra atvaizduojami realiatyviai pagal tėvinį elementą, kuris nėra statiškas, jei tokio elemento nėra, tada pagal <html> elementą. Absoliučios pozicijos elementai nebeužema savo statiškos vietos, todėl jų vietą gali užimti kiti elementai, beto absoliučios pozicijos elementai, panaudojus z-index parametrą, gali būti virš arba po kitais elementais.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* bendri nustatymai */
div {
width:220px;
height:50px;
position:absolute;
line-height:50px;
font-size: 15px;
text-align:center;
font-weight: bold;
color: #000;
}
 
/* individualus nustatymai */
 
div.pirmas{
background-color: #32c3ef;
left: 30px;
top: 120px;
}
div.antras{
background-color: #ea4ce1;
right: 10px;
top: 200px;
}
div.trecias{
background-color: #f00404;
}

pabandyk_pats

Perskaityta: 3142 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
css    pazengusiems    pozicija    static    relative    fixed    absolute   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti