ตำแหน่งสัมพัทธ์ - มันคืออะไร? คำอธิบายรายละเอียด

รัง HTML - กระบวนการที่ยาวอย่างเข้มงวด แต่ความคิดสร้างสรรค์มาก แม้จะมีความจริงที่ว่าคนส่วนใหญ่ที่ใช้ในการไอทีรูปแบบหน้าเว็บอาจจะดูเหมือนเป็นกิจวัตรประจำวันที่น่าเบื่อผู้เชี่ยวชาญที่มีอาชีพสำหรับกรณีดังกล่าวไม่เพียง แต่ในเชิงคุณภาพการดำเนินงาน แต่ยังได้รับจากกระบวนการของความสุขที่มีตัวตน

แต่ก่อนที่จะกลายเป็น coder ประสบการณ์แต่ละใหม่ใช้เวลาศึกษาคำแนะนำต่างๆและข้อกำหนดของทั้งสองภาษา HTML และบนพันธมิตร - CSS เกี่ยวกับว่า สิ่งที่ CSS, ว่ามันคืออะไรและสิ่งที่ "หูหลอก" ช่วยให้คุณได้รับการขึ้นเช่นเดียวกับหนึ่งในคุณสมบัติด้านบน - ตำแหน่งสัมพัทธ์ - วันนี้เราจะพูดคุย

CSS คืออะไร?

CSS ชื่อย่อสามารถคัดลอกและแปลเป็นภาษารัสเซียเป็น "cascading แผ่นสไตล์" มันฟังดูแปลก ๆ สวย - บนมือข้างหนึ่งดูเหมือนว่าชัดเจนและคำพูดและที่อื่น ๆ - ความหมายทั่วไปจะไม่ได้บันทึกทันที ขอเริ่มต้นด้วยง่าย - มีสไตล์ เทคโนโลยีนี้ช่วยให้คุณสามารถแนบวัตถุบนหน้าลักษณะบางประการเกี่ยวกับการปรากฏตัวที่คุณจะสามารถลงทะเบียนครั้งเดียวและใช้จำนวนอนันต์ครั้ง

คำว่า "โต๊ะ" ในการแปลอย่างเป็นทางการปรากฏเกือบโดยอุบัติเหตุ - ในความเป็นจริงที่เหมาะสมมากขึ้นที่นี่จะใช้คำว่า "รายการ" หรือ "รายการ" แต่ผู้เขียนของการแปลต้นฉบับตัดสินใจว่า CSS ดูเหมือนกว่ารายการและเราเป็นใคร ดังกล่าวอยู่ในขณะนี้จะลองพวกเขา

ในที่สุดคำว่า "น้ำตก". ความจริงก็คือแต่ละองค์ประกอบจะมีหลายรูปแบบที่สามารถจะนำมาผสมหรือแม้กระทั่งการทับซ้อน ในกรณีเช่นเบราว์เซอร์ที่มีการหันไปใช้ชุดของกฎในการสั่งซื้อที่จะแต่งลักษณะของบล็อกซึ่งเปิดออกมาเป็นหลายรูปแบบด้วยหนึ่งของพวกเขาตัวอย่างเช่นมีคุณสมบัติพัทธตำแหน่งและอื่น ๆ - ตำแหน่งแอบโซลูท ในความเป็นจริงความขัดแย้งดังกล่าวไม่สามารถได้รับการยอมรับ แต่ในโครงการขนาดใหญ่ความสับสนดังกล่าวเกิดขึ้นค่อนข้างบ่อย

ดังนั้นตอนนี้เมื่อทุกอย่างชัดเจนจากชื่อให้ดูตัวอย่างง่ายๆ สมมติว่าเว็บไซต์ของคุณควรจะมีจำนวนมากของปุ่มออกแบบในวิธีการบางอย่าง พวกเขามีคุณสมบัติเช่นขนาดเงาทึบสี แน่นอนคุณสามารถระบุพารามิเตอร์เหล่านี้สร้างแต่ละปุ่ม แต่ง่ายมากที่จะใช้ CSS ในทางปฏิบัติคุณจะต้องอธิบายชั้นหนึ่งซึ่งแสดงค่าของทั้งหมดของคุณสมบัติดังกล่าวข้างต้นแล้วแทนที่จะเป็นรายการยาวแท็กของแต่ละปุ่มจะต้องระบุชื่อของชั้นแล้วเบราว์เซอร์ตัวเองจะสีองค์ประกอบเหล่านี้ในสีที่ต้องการและให้พวกเขาที่เหมาะสม "กลอส"

อะไรคุณสมบัติตำแหน่งหรือไม่

ตอนนี้เราจะดำเนินการโดยตรงไปยังตำแหน่งทรัพย์สินเพื่อประโยชน์ของการที่เริ่มต้นบทความทั้งหมดนี้ หากคุณมีความคุ้นเคยกับการใช้ภาษาอังกฤษหรือมีสัญชาตญาณที่ดีแล้วคุณควรมีความชัดเจน - คุณสมบัตินี้เป็นผู้รับผิดชอบสำหรับสถานที่ตั้งของรายการ ในความเป็นจริงวิธีที่มันเป็น แต่แทนที่จะตรวจสอบสถานที่ที่ระบุคุณสมบัตินี้จะบอกเบราว์เซอร์ว่ามันควรจะวางหนึ่งหรือองค์ประกอบอื่นที่เกี่ยวกับที่อยู่ติดกันหรือทั่วหน้าโดยรวม

ค่าสามารถคุณสมบัติตำแหน่งอะไร?

สถานที่ให้บริการของเราสามารถยอมรับค่าที่แตกต่างกันมีเพียงห้า นี่คือคำอธิบายสั้น ๆ ของแต่ละ:

• ตำแหน่งสืบทอด คุณลักษณะนี้ช่วยให้คุณสามารถคัดลอกข้อมูลบนตำแหน่งขององค์ประกอบที่เป็นผู้ปกครอง ตัวอย่างเช่นถ้าคุณมี div กับญาติตำแหน่งระบุแล้วป้อนเข้าสู่มันมีค่าสืบทอด IMG จะได้รับการตั้งค่าให้ญาติ
• ตำแหน่งที่คงที่ ค่านี้จะได้รับการองค์ประกอบทั้งหมดโดยอัตโนมัติเว้นแต่จะระบุไว้ใด ๆ เพิ่มเติม องค์ประกอบพอดีกับตำแหน่งที่เป็นที่กล่าวถึงในรหัสและไม่สามารถใช้ได้สำหรับความหลากหลายของ "จีบ" ที่ช่วยให้การเปลี่ยนตำแหน่งของพวกเขา
• ตำแหน่งแอบโซลูท โดยค่านี้คุณสมบัติตำแหน่งค่อนข้างมักจะใช้ในกรณีที่มีความจำเป็นในการสร้าง "ลอย" องค์ประกอบ ด้วยค่าที่กำหนดของรายการทรัพย์สินเป็น "มองไม่เห็น" สำหรับส่วนประกอบอื่น ๆ ของหน้า นั่นคือพวกเขาจะถูกจัดเรียงเป็นถ้าองค์ประกอบแน่นอนเราไม่ได้อยู่ ตัวเขาเองจะเป็นในสถานที่ที่ไม่คำนึงถึงวิธีการรับหน้าไกลเลื่อน
• ตำแหน่งที่คงที่ ในหลาย ๆ วิธีค่านี้จะคล้ายกับก่อนหน้านี้หนึ่ง แต่ในขณะที่องค์ประกอบที่แน่นอนถูกผูกไว้กับผู้ปกครองใช้คงที่เพียงพิกัดของมุมบนซ้ายของหน้าจอเบราว์เซอร์โดยไม่สนใจส่วนที่เหลือขององค์ประกอบที่นำหน้ามัน
• สุดท้ายญาติตำแหน่ง ค่าชนิดนี้จะช่วยให้องค์ประกอบตำแหน่งเมื่อเทียบกับที่อื่น ๆ ซึ่งจะเป็นประโยชน์สำหรับการสร้างปรับตัวเครื่องหมายเรียกว่า "ยาง" ที่พบบ่อย ด้วยคุณสมบัตินี้รายการจะ "ดัน" อื่น ๆ โดยไม่สูญเสียความสามารถในการเปลี่ยนตำแหน่งของพวกเขาบนหน้าเว็บ

การทำงานกับการดำรงตำแหน่งในเบราว์เซอร์ที่แตกต่างกัน

ไม่เบราว์เซอร์ที่เข้ากันได้อย่างเท่าเทียมกัน ขณะที่ส่วนใหญ่โปรแกรมทางเลือกสำหรับการท่องอินเทอร์เน็ตโดยไม่ต้องติดอุปกรณ์ใด ๆ ที่รับรู้ค่าของตำแหน่งเป็นความจริงอย่างแน่นอน "พิเศษเรื้อรัง» Internet Explorer พิจารณาคุณสมบัติขึ้นอยู่กับรุ่นของ

ตัวอย่างเช่นการใช้ที่มีอยู่แล้ว "ฝัง" เบราว์เซอร์ IE6 คุณจะไม่สามารถใช้ค่าคงที่และสืบทอด - "ลา" พวกเขาก็ไม่สนใจมัน อย่างไรก็ตามแม้จะมีความจริงที่ว่ารุ่นที่เจ็ดของสถานการณ์เริ่มดีขึ้นและแก้ไขประมวลผลแล้วเพื่อสืบทอดรัก "เบราว์เซอร์ในการดาวน์โหลดเบราว์เซอร์อื่น ๆ" ถึงเพียงในชาติที่แปด

ส่วนที่เหลือของผู้สังเกตการณ์ใจเย็นจัดการตำแหน่งกับรุ่นแรกที่มีข้อยกเว้นของโอเปร่าซึ่งได้รับการสนับสนุนของคุณสมบัติใน 4 รูปแบบของการตีพิมพ์ในช่วงกลางทศวรรษที่ 90

การทำงานกับตำแหน่งใน Javascript

ในความเป็นจริงเป็นเรื่องของวิธีการทำงานกับคุณสมบัติตำแหน่งใน Javascript คือเราได้รวมเพียงเพื่อประโยชน์ของความเหมาะสม เพราะคุณสมบัตินี้ไม่ได้มีตัวอักษรพิเศษใด ๆ ในชื่อที่คุณสามารถใช้ JS โดยไม่มีการเปลี่ยนแปลงใด ๆ ตัวอย่างเช่นการกำหนดตำแหน่ง div ที่ญาติควรจะรวมถึงบรรทัดเช่นนี้: div.style.position = 'ญาติ

ในขณะที่คุณสามารถดูจะง่ายสวย

ทำไมตำแหน่งบุญพัทธความสนใจเป็นพิเศษ?

ขณะที่ส่วนใหญ่ของค่าทรัพย์สินตำแหน่งที่จะนำมันอย่างอ่อนโยน "ถ่มน้ำลาย" ในองค์ประกอบโดยรอบโดยใช้ค่า "ตำแหน่งสไตล์: ญาติ" ควรจำเกี่ยวกับทั้งหน้าเป็นทั้งเพราะการใช้งานที่ไม่เหมาะสมอาจขอ "เอียง" เนื้อหาทั้งหมดของหน้าจอ .

นอกจากนี้คุณสมบัตินี้เพียง แต่ช่วยให้คุณสามารถแปลงการปรับตัวการออกแบบคงเพราะการประยุกต์ใช้จะมีผลต่อหน้าเนื้อหาทั้งหมดโดยอัตโนมัติ แล้วเรายังมีเวลาที่จะต้องพิจารณาตัวอย่างและข้อผิดพลาดโดยใช้ค่านี้และคุณจะเห็นความสำคัญที่มีตัวตนในการปฏิบัติ

เมื่อคุณควรใช้ตำแหน่งญาติ?

นอกจากนี้ยังมีรูปแบบการชุมนุมของหน้าเว็บ HTML, พัทธตำแหน่งมักจะใช้เพื่อสร้างความหลากหลายของผลที่น่าสนใจ ตัวอย่างเช่นถ้าคุณต้องการให้รายการเป็น "มา" ในหน้าเว็บหรือในทางตรงกันข้ามค่อยๆเดินไกลออกไปในดินแดนของมันก็เป็นอย่างแม่นยำคุณสมบัตินี้ช่วยให้คุณสามารถดำเนินการนี้ "เคล็ดลับ"

เหล่านี้ "เทคนิค" จะดำเนินการผ่าน Javascript เป็นหรือถ้าคุณมีจุดมุ่งหมายสำหรับการจัดเก็บภาษีก้าวหน้าผ่านคุณสมบัติของ CSS3 ซึ่งช่วยให้คุณสามารถปรับการเปลี่ยนแปลงของวัฏจักรในค่าของตัวแปรโดยเฉพาะอย่างยิ่ง

นอกจากนี้ในบางกรณีที่เป็นไปได้ที่จะสร้าง "ไฮบริด" ค่าของตำแหน่งสัมพัทธ์ CSS แม้ว่าจะไม่ได้ในเวลาเดียวกันช่วยให้คุณสามารถตั้งค่าบางอย่างเช่นตำแหน่ง: ญาติแน่นอน แต่โดยใช้เทคนิคบางอย่างก็ยังคงเป็นไปได้ที่จะบรรลุผลนี้ วิธีการนี้อาจจะมีประโยชน์ในกรณีที่คุณต้องการที่จะสร้างสิ่งที่ซับซ้อนเช่น คำแนะนำเครื่องมือ หรือเมนู pop-up พิจารณาตัวอย่างเราจะให้รายละเอียดของโครงสร้างดังกล่าวเป็น "ไฮบริด."

ตัวอย่างของการใช้การจัดอันดับของญาติ

ญาติตำแหน่ง - มันง่ายสวย แต่เครื่องมือที่ยืดหยุ่นที่ช่วยให้คุณใช้ความหลากหลายของผลกระทบที่น่าสนใจ เพื่อไม่ให้เสียเวลาและสถานที่ที่จะเขียนรหัสแม่แบบไร้ประโยชน์เรานำเสนอขั้นตอนวิธีการในช่องปากหลายอย่างซึ่งสามารถตกแต่งเว็บไซต์หรือหน้าเว็บของคุณโดยเฉพาะ

ขอเริ่มต้นด้วย "วิ่งออกไป" สาย สมมติว่าคุณมีความจำเป็นสำหรับองค์ประกอบที่จะ "เดินทาง" เพราะขอบด้านซ้ายของหน้าจอและค่อยๆย้ายไปด้านขวา ในการดำเนินการดังกล่าวเป็น "กลไก" ควรตั้งตำแหน่ง: ญาติ; ซ้าย: -100px ที่ -100 - จำนวนโดยประมาณพิกเซลกว้าง constituting บล็อก ซึ่งรูปแบบนี้จะช่วยให้คุณซ่อนหน่วยที่อยู่ด้านนอกของหน้าจอให้วางไว้ในตำแหน่ง "เริ่มต้น" ตอนนี้คุณสามารถใช้สคริปต์ที่จะเพิ่มขึ้นทุกไม่กี่มิลลิวินาทีมูลค่าทรัพย์สินต่อหน่วยซ้ายตราบใดที่มันไม่ได้กลายเป็นเท่ากับความกว้างของหน้าต่างเบราว์เซอร์ลบความกว้างขององค์ประกอบที่ ผลที่ได้คือหน่วยที่ออกมาจากขอบซ้ายกลิ้งผ่านหน้าจอและ "จอด" ในมือข้างขวาของเขา

อีกตัวอย่างหนึ่งช่วยให้คุณสามารถสร้างองค์ประกอบ "ญาติแน่นอน" ตัวอย่างเช่นคุณสามารถป้อนแน่นอนภายในอื่นมีญาติตำแหน่ง เป็นผลให้เรามีบล็อก "ญาติ" ที่ไม่ได้มีขนาดที่แน่นอนจะถูกจารึกไว้คือตอนนี้สามารถที่จะประจักษ์เองในฐานะที่เป็นอิสระขององค์ประกอบก่อนหน้านี้

ข้อผิดพลาดทั่วไปเมื่อใช้พัทธตำแหน่ง

ความผิดพลาดที่พบบ่อยที่สุดเมื่อใช้พัทธตำแหน่งคือการที่นักออกแบบเว็บจำนวนมากลืมเกี่ยวกับความสามารถในการสำรองสถานที่ในหน่วยซึ่งสามารถอยู่ที่ใดก็ได้ ตัวอย่างเช่นถ้าคุณมีขนาดใหญ่พอสมควรอยู่นอกของหน้าจอและมีการวางตำแหน่งญาติในสถานที่ที่จะเป็นที่อ้าปากค้าง "หลุม" อย่างไรก็ตามแม้คุณสมบัตินี้บางครั้งก็สร้างความไม่สะดวกบางอย่างสามารถนำมาใช้สำหรับการที่ดีตัวอย่างเช่นการสร้างผลที่น่าสนใจของ "ตัวเองประกอบ" ของเว็บไซต์ที่ทั้งหมดของบล็อกของตนจะถูกวางไว้ค่อยในตำแหน่งบนสุด: 0; ซ้าย: 0; t. e. ตำแหน่งเดิม