Posisi Relatif - apa iku? gambaran rinci

Nyarang HTML - proses dhowo, kaku, nanging banget kreatif. Senadyan kasunyatan sing kanggo akèh wong dipunginaaken ing IT, kaca web tata koyone tumindake boring, spesialis sing duwe pagawean kanggo kuwi cilik, ora mung qualitatively nindakake tugas, nanging uga nampa saka proses kesenengan nyoto.

Nanging, sadurunge dadi coder experienced, saben anyaran ngentèkaké akèh wektu sinau macem-macem instruksi lan specifications saka loro basa HTML, lan ing kumpulan sawijining - CSS. About persis apa CSS, apa iku lan apa "kuping feint" ngidini sampeyan kanggo njaluk munggah, uga minangka salah siji saka situs ndhuwur sawijining - Position Relative - dina iki kita bakal pirembagan.

Apa CSS?

CSS Singkatan bisa transcribed lan diterjemahaké Rusia minangka "gaya runtun sheets". Muni cantik aneh - ing tangan siji, dadi misale jek cetha, lan tembung, lan ing liyane - ing teges umum wis ora langsung dijupuk. Ayo dadi miwiti karo prasaja - karo gaya. teknologi ngijini sampeyan kanggo masang obyek ing kaca, ciri tartamtu gegayutan katon sing mung bisa ndhaftar sepisan lan nggunakake nomer tanpa wates kaping.

Tembung "Tabel" ing terjemahan resmi muncul meh dening Laka - nyatane luwih cocok kene bakal nggunakake tembung "dhaptar" utawa "dhaptar", Nanging penulis saka terjemahan asli mutusaké sing CSS katon kaya liyane saka dhaptar, lan sing kita kuwi saiki kanggo nyoba mau.

Akhire, tembung "Cascade." Kasunyatan iku saben unsur bisa duwe sawetara gaya sing bisa pipis utawa malah tumpang tindih. Ing kasus kaya mengkono, browser wis Resor kanggo pesawat saka aturan, supaya nyipta katon saka pamblokiran, kang nguripake metu dadi sawetara gaya, karo salah siji wong, contone, wis Position property Relatif, lan liyane - Position Absolute. Ing kasunyatan, konflik kuwi ora bisa toleransi, nanging ing proyek gedhe kebingungan kuwi mengkono kerep mèh.

Dadi saiki, nalika kabeh iku cetha saka jeneng, supaya kang katon ing tuladha prasaja. Ayo dadi ngomong situs sing arep nomer akeh tombol, dibangun ing cara tartamtu. Padha duwe kayata ukuran, Shadow, opacity, werna. Mesti wae, sampeyan bisa nemtokake paramèter-paramèter iki, nggawe saben tombol, nanging akeh luwih gampang kanggo nggunakake CSS. Ing laku, sampeyan kudu njlèntrèhaké kelas tartamtu, kang nampilake dhaptar angka saka kabeh situs ndhuwur, banjur, tinimbang dhaftar dawa, tag saben tombol mung kudu nemtokake jeneng saka kelas, banjur browser dhewe bakal werna unsur iki ing werna sing dikarepaké lan menehi wong sing tepat "kinclong".

Apa ora bisa Position?

We saiki nerusake langsung menyang Posisi property, marga saka kang diwiwiti kabèh artikel iki. Yen menowo karo basa Inggris, utawa duwe roso apik, sampeyan kudu wis cetha - sifat iki tanggung jawab kanggo lokasi item. Ing kasunyatan, cara iku, nanging nemtokake lokasi tartamtu, sifat iki ngandhani browser carane iku kudu diselehake siji utawa unsur liyane bab jejer utawa tengen kaca minangka wutuh.

angka bisa properti Position apa?

kita bisa nampa sawetara nilai beda, ana mung limang. Punika minangka gambaran Brief saka saben:

• Posisi warisan. Fitur iki ngidini sampeyan kanggo nyalin data ing posisi unsur sing tiyang sepah. Contone, yen sampeyan duwe div karo Position Relative kasebut, banjur lumebet karo nilai tampa panduman IMG uga bakal diset kanggo Relatif.
• Posisi statis. Nilai iki diwènèhaké marang kabeh unsur kanthi otomatis, kajaba nyatakake apa liyane. Unsur pas menyang posisi minangka kasebut ing kode ora kasedhiya kanggo macem-macem "frills", saéngga kanggo ngganti posisi sing.
• Posisi Absolute. Miturut nilai iki properti Position wis cukup kerep digunakake ing kasus ngendi iku perlu kanggo nggawe "ngambang" unsur. Karo nilai tartamtu saka item property punika "siro" kanggo komponen saka kaca. Sing, lagi disusun kaya unsur kita Absolute ora ana. Panjenengane bakal tansah dadi ing panggonan, preduli saka carane adoh wis scrolled kaca.
• Posisi Telpon. Kanthi nganggo cara akeh, nilai iki padha karo kang sadurungé, Nanging, nalika unsur Absolute bound kanggo tiyang sepah, tetep Efesus mung koordinat sudhut kiwa ndhuwur layar browser, mboten midhangetaken liyane saka unsur sing sadurungé iku.
• Akhire, Posisi Relatif. jinis angka iki ngidini Atas unsur relatif kanggo liyane, kang bisa migunani kanggo nggawe adaptif menehi disebut ing umum "karet". Kanthi sifat iki, item bakal "push" liyane, tanpa rusak kemampuan kanggo ngganti posisi sing ing kaca.

Nggarap Position in browser beda

Ora kabeh browser merata cocog. Nalika paling program alternatif kanggo selancar Internet tanpa Hitches Nilai saka Position wikan pancen bener, "kronis khusus» Internet Explorer nganggep properti, gumantung versi.

Contone, nggunakake wis "dikubur" ing browser IE6, sampeyan bisa ora nggunakake nilai Telpon lan warisan - "kuldi" padha mung ditolak lewat. Nanging, senadyan kasunyatan sing versi kapitu saka kahanan wiwit nambah, lan tetep wis diproses, kanggo Warisan kinasih "browser kanggo ngundhuh browser liyane," ngrambah mung ing inkarnasi kawolu sawijining.

Liyane saka pengamat calmly nangani Position karo versi pisanan, wong ing Opera, kang wis tak dhukungan saka situs ing 4 variasi sawijining, diterbitake ing agêng-90s.

Nggarap Position in Javascript

Ing kasunyatan, crita carane bisa karo Position property in Javascript, kita wis klebu mung kanggo marga saka decency. Amarga sifat iki ora duwe karakter khusus ing judhul, sampeyan bisa nggunakake JS tanpa owah-owahan, contone, kanggo nyetel Position div Relatif, ngirim kalebu baris kaya iki: div.style.position = 'relatif'.

Nalika sampeyan bisa ndeleng, iku cantik prasaja.

Apa Position manfaat Relatif manungsa waé khusus?

Nalika paling saka Posisi angka property, sijine iku mildly, "idu" ing unsur lingkungan, nggunakake nilai "posisi gaya: relatif", kudu tansah eling bab kabèh kaca minangka kabèh, amarga panyalahgunaan bisa banget "skew" isi kabeh layar .

Kajaba iku, sifat iki mung ngijini sampeyan kanggo gampang Ngonversi adaptif desain tetep, amarga aplikasi kanthi otomatis bakal mengaruhi kabeh kaca isi. Banjur kita isih duwe wektu kanggo nimbang conto lan kasalahan nggunakake nilai iki, lan sampeyan bakal weruh pinunjul nyoto ing laku.

Nalika sampeyan kudu nggunakake posisi relatif?

Saliyane ing tata letak conventional kaca HTML, Position Relative asring digunakake kanggo nggawe macem-menarik efek. Contone, yen sampeyan pengin item "teka" ing kaca utawa, ing nalisir, mboko sithik banjur ngluwihi sawijining wilayah, iku sabenere sifat iki bisa mbantu ngleksanakake iki "trick".

Iki "trik" sing dipun ginakaken liwat Javascript iku, utawa, yen Yahoo kanggo imposition maju, liwat sifat CSS3, sing ngidini sampeyan kanggo nyetel pangowahan cyclical ing Nilai saka global tartamtu.

Kajaba iku, ing sawetara kasus bisa kanggo nggawe "Sato" nilai-nilai Position Relative. CSS, sanadyan ora ing wektu sing padha ngijini sampeyan kanggo nyetel kaya posisi: relatif Absolute, nanging kanthi nggunakake sawetara trik, isih bisa kanggo entuk efek iki. Iki pendekatan bisa migunani ing kasus ngendi sampeyan kudu nggawe soko Komplek kaya sing tooltip utawa menu pop-up. Ngelingi conto, kita bakal menehi gambaran saka struktur kaya "Sato."

Conto nggunakake peringkat relatif

Posisi Relatif - iku paling cantik prasaja, nanging alat fleksibel sing ngijini sampeyan kanggo ngleksanakake macem-menarik efek. Supaya ora kanggo sampah wektu lan panggonan kanggo nulis cithakan kode guna, kita saiki saperangan kalkulus lisan, kang bisa dekorasi situs utawa kaca tartamtu.

Ayo dadi miwiti karo "mbukak metu" line. Upaminipun duwe perlu kanggo unsur sing bakal "travel" amarga pojok kiwa layar lan alon dipindhah menyang sisih tengen. Kanggo ngleksanakake kuwi "mekanisme" kudu nyetel posisi: relatif; kiwa: -100px, ngendi -100 - nomer kira-kira saka piksel babagan pemblokiran jembaré. gaya iki bakal ngidini sampeyan kanggo ndhelikake unit njaba layar, manggonke iku ing "posisi awal". Saiki sampeyan bisa nggunakake script sing bakal nambah saben sawetara milliseconds kiwa Nilai property saben unit anggere ora dadi witjaksono menyang jembaré saka jendhela browser minus jembaré saka unsur. Asil punika unit sing metu saka pojok kiwa, mbalek tengen layar lan "diparkir" ing tangan tengen.

Liyane ngijini sampeyan kanggo nggawe "relatif-Absolute" unsur. Contone, sampeyan bisa ngetik Absolute nang liyane, gadhah Position Relative. Akibaté, kita duwe "relatif" pemblokiran sing ora duwe ukuran sing Absolute marajah, saiki bisa mujudaké dhiri ing posisi sawijining saka unsur sadurungé.

kesalahane khas nalika nggunakake Position Relative

Ing kesalahan paling umum nalika nggunakake Position Relative iku akeh web perancang lali bab kemampuan kanggo cadangan Panggonan ing unit, kang bisa dumunung ing ngendi wae. Contone, yen sampeyan duwe kasuwur, diselehake njaba layar lan gadhah posisi relatif, ing sawijining panggonan bakal dadi "bolongan" gaping. Nanging, malah property iki kadhangkala nggawe inconveniences tartamtu bisa digunakake kanggo apik, contone, nggawe efek menarik saka "poto-perakitan" saka situs, ngendi kabeh pamblokiran sing mboko sithik diselehake ing posisi top: 0; kiwa: 0; t. e. lokasi asli.