CSS байршил нь Just X, Y координатаас илүү
CSS байршил нь вэбсайтын бүтэц бий болгоход чухал хэсэг болсон. Flexbox болон CSS Grid шиг шинэ CSS байршлын аргачлалуудтай байсан ч байршуулалт нь ямар ч вэб дизайнерын багийн заль мэхэнд чухал байр суурь эзэлсээр байна.
CSS байрлалыг ашиглах үед таны хийх ёстой хамгийн эхний зүйл бол өгөгдсөн элементэд үнэмлэхүй эсвэл харьцангуй байрлалыг ашиглахаар бол браузерт хэлэх байрлалд CSS өмчийг тогтооно. Та эдгээр хоёр байрлалын шинж чанаруудын ялгааг ойлгох хэрэгтэй.
Валют дизайныг үнэмлэхүй, үнэмлэхүй хоёр CSS байршлын шинж чанарууд байдаг хэдий ч үнэндээ дөрвөн байршил нь өмчийн байрлалтай байдаг:
- статик
- үнэмлэхүй
- харьцангуй
- Тогтмол
Статик нь вэб хуудсан дээрх элементийн анхдагч байрлал юм. Хэрэв та элементийн байрлалыг тодорхойлохгүй бол энэ нь статик болно. Энэ нь HTML баримт бичиг хаана байгаа, тухайн баримт бичгийн ердийн урсгал дотор хэрхэн харагдахыг үндэслэн дэлгэц дээр харуулна гэсэн үг юм.
Хэрэв та статик байрлал бүхий элемент рүү дээд эсвэл зүүн байрлалыг байршуулах дүрмийг хэрэглэвэл тэдгээр дүрмийг үл хэрэгсэх бөгөөд элемент нь хэвийн баримтын урсгал дээр хэвээр үлдэх болно. Үнэнийг хэлэхэд, хэрэв хэзээ нэгэн цагт CSS дээр статик байрлалд элементийг тохируулах шаардлагатай байдаг бол энэ нь анхдагч утга юм.
Үнэмлэхүй CSS байрлал
Үнэмлэхүй байр суурь нь ойлгоход хамгийн амархан CSS байрлал байж болох юм. Та CSS байршлын өмчөөс эхлэх болно:
албан тушаал: үнэмлэхүй;Энэ утга нь позицийг ямар ч байрлалд байршуулахыг баримт бичгийн ердийн урсгалаас хасах бөгөөд хуудасны яг байршилд байрлуулах ёстой. Энэ элемент нь хамгийн ойр байрлах өвөг дээдсээс хамаардаг.
Зөв байрлал бүхий элемент нь баримтын хэвийн урсгалаас гардаг тул HTML-д өмнө болон дараа нь элементүүд вэб хуудсан дээр байрладаг.
Жишээ нь: хэрэв та харьцангуй үнэ цэнэтэй харьцааг (хэрэв бид энэ үнэ цэнийг удахгүй харвал), энэ хэсэгт хуваах дээд хэсгийнхээс 50 пиксель байрлуулахыг хүссэн догол мөрийг оруулсан бол "яг үнэмшилтэй" гэсэн позицийн утгыг "догол мөр" дээрх иймэрхүү "дээд" өмч дээрх 50хх офсет үнэтэй хамт нэмнэ.
албан тушаал: үнэмлэхүй; дээд: 50px;Энэ туйлын байрлал бүхий элемент нь харьцангуй байрлалтай хэсгийн хамгийн дээд талд 50 пикселийг харуулдаг. Таны "туйлын" байрлал бүхий элемент харьцангуй байрлалыг ашигладаг бөгөөд түүний ашигладаг эерэг утга нь үүнийг хамаатай.
Таны ашигладаг боломжтой дөрвөн байршлын шинж чанарууд нь:
- дээд
- баруун
- доод
- үлдсэн
Та дээд ба доод аль нэгийг ашиглаж болно (элемент нь эдгээр утгуудын дагуу байрладаггүй) болон баруун эсвэл зүүн аль нэг нь байж болно.
Хэрэв элемент нь үнэмлэхүй байрлалаар тогтоогдсон бол тэнд байрлахгүй өвөг дээдсээгүй байрлал байвал энэ нь хамгийн дээд түвшний элемент болох биеийн элементтэй харьцуулахад байрлалтай болно.
Харьцангуй байрлал
Бид харьцангуй байр суурийг аль хэдийн дурдсан байсан тул одоо тэр өмчийг харцгаая.
Харьцангуй байрлал нь үнэмлэхүй байрлалаар ижил байр суурь бүхий 4 шинж чанарыг ашигладаг. Гэхдээ хамгийн ойр байрлах өвөг дээдсээсээ элементийн байрлалыг байрлуулахын оронд элемент нь хэвийн урсгал хэвээр байвал элемент хаана байхаас эхэлдэг.
Жишээлбэл, хэрэв та өөрийн вэб хуудсандаа 3 догол мөртэй байх бөгөөд гурав дахь байрлал дээр байрлуулсан "байрлал: харьцангуй" загвартай бол байрлал нь одоогийн байршил дээр суурилан байршуулна.
1 дэх хэсэг.
2 дахь хэсэг.
Дээрх жишээнд гуравдугаар догол мөр нь савны элементийн зүүн талын 2ем байрлалыг байрлуулах боловч эхний хоёр догол мөрөөс доогуур хэвээр байх болно. Энэ нь баримт бичгийн хэвийн урсгал хэвээр байх бөгөөд зүгээр л арай доогуур байх болно. Хэрэв та үүнийг албан тушаалаа өөрчилсөн бол: үнэмлэхүй; Үүнийг дагасан бүх зүйл нь баримт бичгийн хэвийн урсгалд байхаа больсон учраас дээрээс харуулах болно.
Вэб хуудсан дахь элементүүд нь албан тушаалын үнэ цэнийг тогтооход хэрэглэгддэг. Энэ нь элементийг хэвийн урсгалд харуулах болно. Энэ элементийг элементийг бусад элементүүдийг байршуулах боломжтой нөхцөлийг бүрдүүлэхээр хийгддэг. Жишээлбэл, хэрэв таны вэбсайтыг бүхэлд нь вэбсайттай холбосон хуваалттай бол "контейнер" (энэ нь вэб дизайн дахь нийтлэг тохиолдол юм) энэ дэд салбарыг харьцангуй байрлалаар тохируулж болох ба ингэснээр дотор нь юу ч хэрэглэж болно Энэ нь байрлал тогтоох орчин юм.
Суурин байрлуулах талаар юу?
Тогтвортой байршил нь үнэмлэхүй байршилтай адил юм. Элементийн байрлал нь абсолют загвартай ижил аргаар тооцоологддог, гэхдээ суурин элементүүд нь тухайн байршилд баригдсан - бараг л watermark шиг байна. Хуудас дээрх бүх зүйлс дараа нь элементийн өнгөрсөн.
Энэ өмчийг ашиглахын тулд дараахь зүйлийг хийх болно:
албан тушаал: тогтмол;Сайтандаа элементийг байршуулах үед таны вэб хуудас хэвлэгдэх үед тухайн байршилд хэвлэгдэх болно гэдгийг анхаарна уу. Жишээ нь, хэрэв таны элемент хуудасны дээд хэсэгт байрлах бол хуудасны дээд талд байрлах тул хэвлэгдсэн хуудасны дээд талд байрлах болно. Хэвлэх хуудсууд нь тогтмол элементүүдийг хэрхэн харуулахыг өөрчлөхийн тулд хэвлэл мэдээллийн төрлийг ашиглаж болно:
@media screen {h1 # first {байр суурь: fixed; }} @media print {h1 # first {position: static; }}Женнифер Кэрнин эх нийтлэл. 1/17/16 дээр Жереми Герард засварлав.