CSS static and relative positioning

CSS static and relative positioning
Contents [hide] 
1 Introduction
2 The wonderful world of rectangles
3 Static positioning
3.1 Block box layout
3.2 Inline box layout
4 Relative positioning
4.1 Multi-column layout with source order requirements
4.1.1 Making columns
4.1.2 Working around quirks in Internet Explorer
4.2 Other uses for relative positioning
5 Summary
6 Exercise questions
Introduction

In this Web Standards Curriculum article I’ll start looking in depth at how you can use CSS to position HTML elements wherever you want on the page, using the position CSS property and some related properties.
The position property in CSS has four legal values (in addition to the ubiquitous inherit): static, relative, absolute and fixed. These values have a significant impact on how an element is rendered. The two values static and relative are closely related, and we’ll look into those in great detail in this article. The values absolute and fixed are also closely related, and I’ll save those for the next article in the series.
The wonderful world of rectangles

Now for a bit of a recap on CSS and HTML boxes, as discussed in my [floats and clearing article]. An HTML document consists of a number of elements interspersed with character data (text). When such a document is rendered on a computer screen or printed on paper, those elements generate rectangular boxes. Just as the set of HTML elements is divided into block-level elements and inline elements, boxes in CSS are essentially either block boxes or inline boxes.
By default, the built-in user agent style sheet in a browser makes block-level HTML elements such as p and div generate block boxes, while inline elements such as strong and span generate inline boxes. We can control the type of box that is generated using the display property.
The boxes generated by the elements in a document are laid out according to a clearly defined set of rules in the CSS2.1 specification. Those rules are written for the relatively few people who write browser software to learn how CSS works though, not for those of us who design web pages for a living—or a hobby. This is why this entire course exists! As a result, the specification can be a bit difficult to understand. In this article I’ll try to explain the basics in a way that is better suited for web designers and developers.
Static positioning

This is really a misnomer. Boxes with position:static are not really “positioned” at all in the CSS sense. They are simply laid out in the order they occur in the markup and take up as much room as they need—this is the default behavior you get when you don’t apply any CSS at all to your HTML.
There are fundamental differences in how block boxes are laid out compared to how inline boxes are laid out, so let’s examine the two types one at a time. I’ll start with block boxes, because they are simpler.
Block box layout
Unless we apply any specific CSS declarations, block boxes are laid out vertically from top to bottom in the order they occur in the markup. Each box is normally as wide as the document (the body element), but even if we make them narrower they will not be laid out side by side even if there’s room; they’ll still be laid out one below the other. You can think of it as if each block box had an implicit line break before and after it, to make sure it ends up on a “line” of its own.
The vertical distance between two block boxes is controlled by the margin-bottom property of the first box and the margin-top property of the second box (you’ve seen how to manipulate these earlier in the course). For boxes in the normal flow, ie boxes that aren’t floated or absolutely positioned, the vertical margins between two adjacent block boxes will collapse—overlap—so that the net result is not the sum of the two margins, but the greater of the two, as seen in Figure 1 below.
Consider the following HTML fragment:
This paragraph has a 40px bottom margin.
This paragraph has a 20px top margin.
When viewed in a browser, the margins collapse, as shown in Figure 1.

Figure 1: The margins collapse—the distance between the two is 40px, not 60px.
A block box will either contain only other block boxes or only inline boxes. If a block-level element contains a mix of block-level and inline children—which is permissible, although semantically questionable’so-called anonymous block boxes will be generated to encompass the inline child boxes, so that the parent only contains block boxes.
You can specify the dimensions of a block box using the width and height properties. You can also set both vertical and horizontal margins on them. The initial (default) value for width and height is auto, and the initial value for margin properties is . These factors in combination mean that a block box will by default be as wide as its parent, as illustrated in Figure 2.

Figure 2: Block boxes are laid out vertically.
Inline box layout
This section may be difficult to understand if you’re new to CSS, but don’t despair if you don’t get it the first time you read it. Experimenting a little on your own is probably the best way to get a solid understanding of these issues—just make sure that you’re using a good, standards-compliant browser when testing, such as Opera or Firefox.
Inline boxes are generated by default by inline HTML elements, but there are also anonymous inline boxes generated to encompass the text content of elements. The inline boxes are laid out horizontally, one after the other, in the order in which they occur in the markup. Depending on the direction property, the inline boxes will either be laid out from left to right (direction:ltr ) or from right to left (direction:rtl ).
Left-to-right direction is used with, for instance, European languages, while right-to-left direction is used with languages such as Arabic and Hebrew. The set of inline boxes that make up one line on the screen (or paper) are enclosed in yet another rectangle, known as a line box. Line boxes are laid out vertically within their block-level parent, with no space between them. We can affect the height of line boxes through the line-height property.
For inline boxes we cannot specify any dimensions. We can specify horizontal margins, but not vertical margins. If necessary, an inline box will be split into several inline boxes, distributed over two or more line boxes. When such a split occurs, any horizontal margins and padding, and any vertical borders, will only apply before the first box and after the last box. Consider a document with the following rule for em elements:
em {
margin: 0 2em;
padding: 0 1em;
border: 1px dotted blue;
}
This will give you a layout somewhat like that seen in Figure 3, when the styled elements are broken over multiple lines.

Figure 3: Margins, padding and border do not apply where breaks occur.
The vertical alignment of inline boxes within the encompassing line box is determined by the vertical-align property. The default value is baseline, which means that the inline boxes are aligned so that their text baselines line up. The baseline is the imaginary line on which letters without descenders stand. It is placed some distance above the bottom of the line box to leave room for the descenders of lowercase letters, as shown in Figure 4.

Figure 4: Letters stand on the imaginary baseline.
Note that the vertical-align property applies to inline boxes and table cells only, and it isn’t inherited. Figure 5 shows some small images with different vertical alignment.

Figure 5: Images placed using settings of the vertical-align CSS property.
When the total width of the inline boxes within a line box is less than the width of the line box itself, the horizontal alignment is controlled by the text-align property. With text-align:justify, extra space is inserted between the inline boxes, if necessary, to make the content both left- and right-justified. This property applies to block boxes, table cells and inline blocks, and it is inherited—Figure 6 shows the result of applying different values of the text-align property to text inside table cells.

Figure 6: Controlling the alignment of text using the text-align property.
Relative positioning

Relative positioning is a positioning scheme in CSS, but it is more closely related to static “positioning” than with its cousins—absolute and fixed positioning. An element with position:relative is first laid out just like any static element; block-level or inline. But then something interesting happens: the generated box is shifted according to the top, bottom, left and right properties.
The thing to remember about relative positioning is that it’s only the generated box that is shifted. The element still remains where it was in the static document flow. That’s where it “takes up space” as far as other elements are concerned. This means that the shifted box may end up overlapping other elements’ boxes, because they still act like the relatively positioned element has remained where it should be, before the positioning was applied. As far as the document flow is concerned, the element has not moved—it is just the end visual result that shows the box being moved. Let’s look at it in practice.
Copy the HTML code below into a new document in your favourite text editor and save it as relative.html.




Relative Positioning


Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Quisque mollis, justo vel rhoncus aliquam

ผลลัพธ์ (ไทย) 1:

CSS ญาติ และคงตำแหน่งเนื้อหา [ซ่อน] บทนำ 12 โลกมหัศจรรย์ของสี่เหลี่ยม3 ตำแหน่งคงที่3.1 โครงร่างของกล่องบล็อก3.2 โครงร่างของกล่องในแนวเดียวกัน4 ตำแหน่งแบบสัมพัทธ์4.1 แบบหลายคอลัมน์โครง มีแหล่งกำหนด4.1.1 ทำคอลัมน์4.1.2 การทำงานรอบ quirks ใน Internet Explorer4.2 ใช้อื่น ๆ ตำแหน่งสัมพัทธ์สรุป 5คำถามแบบฝึกหัดที่ 6แนะนำในบทความนี้เว็บมาตรฐานหลักสูตร ฉันจะเริ่มมองลึกที่คุณสามารถใช้ CSS เพื่อองค์ประกอบ HTML ตำแหน่งที่ใดก็ ตามที่คุณต้องการบนหน้า ใช้ตำแหน่งคุณสมบัติ CSS และบางส่วนที่เกี่ยวข้องกับคุณสมบัติคุณสมบัติตำแหน่งใน CSS มีค่าทางกฎหมาย 4 (นอกจากคือ ubiquitous): คง ญาติ แน่นอน และถาวร ค่าเหล่านี้มีผลกระทบอย่างมีนัยสำคัญในวิธีแสดงองค์ประกอบ ค่าสองค่าคงที่ และญาติใกล้ชิดเกี่ยวข้อง และเราจะมองไปในรายละเอียดมากในบทความนี้ ค่าสัมบูรณ์ และคงยังใกล้ชิดเกี่ยวข้อง และฉันจะเก็บที่ในบทความถัดไปในชุดโลกมหัศจรรย์ของสี่เหลี่ยมสำหรับบิตของการปะยางรถใน CSS และ HTML กล่อง ตามที่อธิบายไว้ในของฉัน [ลอยและหักบัญชีบทความ] เอกสาร HTML ที่ประกอบด้วยจำนวนขององค์ประกอบที่กระจายอักขระข้อมูล (ข้อความ) เมื่อเอกสารดังกล่าวถูกแสดงบนหน้าจอคอมพิวเตอร์ หรือพิมพ์ลงบนกระดาษ องค์ประกอบเหล่านั้นสร้างกล่องสี่เหลี่ยม เหมือนชุดขององค์ประกอบ HTML แบ่งออกเป็นบล็อกระดับองค์ประกอบและองค์ประกอบแบบอินไลน์ กล่องใน CSS ได้เป็นบล็อกกล่องหรือกล่องในแนวเดียวกันโดยค่าเริ่มต้น สไตล์ชีตัวแทนผู้ใช้ภายในเบราเซอร์ช่วยให้องค์ประกอบ HTML บล็อกระดับ p และ div สร้างบล็อกกล่อง ในขณะที่องค์ประกอบแบบอินไลน์เช่นแข็งแกร่ง และระยะสร้างกล่องแบบอินไลน์ เราสามารถควบคุมชนิดของกล่องที่สร้างขึ้นโดยใช้คุณสมบัติการแสดงผลกล่องที่สร้างขึ้น โดยองค์ประกอบในเอกสารจะวางออกตามชุดของกฎในข้อมูลจำเพาะของ CSS2.1 ไว้อย่างชัดเจน เขียนกฎสำหรับค่อนข้างบางคนที่เขียนซอฟต์แวร์เบราว์เซอร์เพื่อเรียนรู้ CSS ทำงานอย่างไร แต่ไม่ใช่สำหรับพวกเราที่ออกแบบเว็บเพจเพื่อการครองชีพ — หรืองานอดิเรก นี่คือเหตุผลที่มีหลักสูตรนี้ทั้งหมด ดัง ข้อมูลจำเพาะสามารถเป็นบิตยากที่จะเข้าใจ ในบทความนี้ ผมจะพยายามอธิบายพื้นฐานที่ดีเหมาะสำหรับนักออกแบบเว็บและนักพัฒนาตำแหน่งคงที่นี้เป็นจริงเป็น misnomer กล่องที่ มีตำแหน่ง: คงจะไม่จริง ๆ "แห่ง" เลยรู้สึก CSS พวกเขาก็จะวางออกในลำดับจะเกิดขึ้นในการมาร์กอัป และห้องพักมากที่สุดเท่าที่พวกเขาต้องใช้ตัวนี้คือพฤติกรรมเริ่มต้นเมื่อคุณไม่สามารถใช้ CSS ใด ๆ เลยกับ HTML ของคุณมีความแตกต่างพื้นฐานในวิธีบล็อกแอร์กล่องเปรียบเทียบกับวิธีวางไลน์กล่องออก ตรวจสอบสองชนิดหนึ่งในเวลานั้น ฉันจะเริ่มต้น ด้วยบล็อกกล่อง เนื่องจากจะง่ายกว่าโครงร่างของกล่องบล็อกถ้าเราใช้การประกาศ CSS เฉพาะ กล่องบล็อกจะวางแนวตั้งจากบนลงล่างตามลำดับเกิดขึ้นในการมาร์กอัป กล่องแต่ละกล่องเป็นปกติความกว้างเอกสาร (องค์ประกอบร่างกาย), แต่ถ้าเราให้แคบลง พวกเขาจะไม่วางเคียงข้างแม้มีห้อง พวกเขาจะยังคงวางหนึ่งต่ำกว่าอีกด้วย คุณสามารถคิดว่า ของมันว่ากล่องแต่ละบล็อกมีบรรทัดมีนัยแบ่งก่อน และหลัง จาก นั้น ให้แน่ใจว่าจะสิ้นสุดใน "บรรทัด" ของตัวเองระยะห่างแนวตั้งระหว่างกล่องบล็อกสองจะถูกควบคุม โดยคุณสมบัติขอบล่างของกล่องแรกและลักษณะของขอบด้านบนของกล่องสอง (คุณเคยเห็นวิธีการจัดการเหล่านี้ก่อนหน้านี้ในหลักสูตร) สำหรับกล่องในขั้นตอนปกติ ie กล่องที่ไม่ได้ลอย หรือ ตำแหน่งที่แน่นอน ระยะขอบแนวตั้งระหว่างกล่องติดบล็อกสองจะยุบตัวทับซ้อน — ให้ผลไม่ได้ผลรวมของระยะขอบที่สอง แต่มากกว่าสอง ดังที่เห็นในรูปที่ 1 ด้านล่างพิจารณาส่วน HTML ต่อไปนี้:ย่อหน้านี้มีระยะขอบล่าง 40pxย่อหน้านี้มีระยะขอบบน 20pxเมื่อดูในเบราว์เซอร์ ขอบยุบ ดังที่แสดงในรูปที่ 1รูปที่ 1: ระยะขอบยุบ — ระยะห่างระหว่างทั้งสองเป็น 40px, 60px ไม่กล่องบล็อกอาจจะประกอบด้วยอื่น ๆ บล็อกกล่องหรือกล่องในแนวเดียวกันเท่านั้น ถ้าองค์ประกอบระดับการบล็อกประกอบด้วยผสมของเด็กระดับบล็อคและไลน์ — ซึ่งจะอนุญาต แม้ว่าจะสร้างขึ้นทาง questionable'so เรียกบล็อกแบบไม่ระบุชื่อกล่องเพื่อรอบกล่องลูกไลน์ เพื่อให้แม่ประกอบด้วยกล่องบล็อกเท่านั้นคุณสามารถระบุขนาดของกล่องบล็อกโดยใช้คุณสมบัติความกว้างและความสูง นอกจากนี้คุณยังสามารถตั้งระยะขอบแนวตั้ง และแนวนอนได้ ค่าเริ่มต้น (เริ่มต้น) สำหรับความกว้างและความสูงอัตโนมัติ และค่าเริ่มต้นสำหรับคุณสมบัติระยะขอบ ปัจจัยเหล่านี้รวมกันหมายความ ว่า กล่องบล็อก โดยค่าเริ่มต้นจะเป็นกว้างเป็นหลัก ดังที่แสดงในรูปที่ 2รูปที่ 2: กล่องบล็อกจะวางในแนวตั้งโครงร่างของกล่องในแนวเดียวกันส่วนนี้อาจจะยากที่จะเข้าใจหากคุณกำลังใหม่ CSS แต่อย่าหมดหวังถ้าคุณไม่ได้รับมันเป็นครั้งแรกที่คุณอ่านได้ ทดลองเล็กน้อยคุณจะเข้าใจการแข็งของปัญหาเหล่านี้ที่ดีสุดคือเพียงให้แน่ใจว่า คุณใช้เบราว์เซอร์ที่ดี เข้ากันได้ กับมาตรฐานเมื่อทดสอบ เช่นโอเปร่าหรือ Firefoxกล่องไลน์สร้างขึ้นตามค่าเริ่มต้น โดยองค์ประกอบ HTML ไลน์ แต่ยังมีกล่องแบบอินไลน์เพื่อรอบเนื้อหาข้อความขององค์ประกอบ กล่องในแนวเดียวกันจะวางออกแนว หนึ่งหลังอื่น ๆ ตามลำดับที่เกิดในมาร์กอัป ขึ้นอยู่กับคุณสมบัติทิศทาง กล่องแบบอินไลน์จะอาจวาง จากซ้ายไปขวา (ทิศทาง: ltr) หรือ จากขวาไปซ้าย (ทิศทาง: ซ้าย)คุณสามารถใช้ทิศทางจากซ้ายไปขวากับ เช่น ภาษา ในขณะที่ทิศทางขวาไปซ้ายจะใช้ภาษาอาหรับและภาษาฮิบรู ชุดของกล่องในแนวเดียวกันที่สร้างบรรทัดหนึ่งบรรทัดบนหน้าจอ (หรือกระดาษ) จะอยู่ในสี่เหลี่ยมอีก เป็นกล่องรายการ กล่องรายการจะวางออกแนวตั้งภายในบล็อกระดับปกครอง ด้วยไม่มีช่องว่างระหว่างการ เราสามารถส่งผลต่อความสูงของกล่องรายการผ่านคุณสมบัติความสูงสำหรับกล่องในแนวเดียวกัน เราไม่สามารถระบุมิติใด ๆ เราสามารถระบุระยะขอบแนวนอน ระยะขอบแนวตั้งไม่ ถ้าจำเป็น มีกล่องในแนวเดียวกันจะแบ่งออกเป็นกล่องไลน์หลาย มากกระจายกล่องรายการสองรายการ ขึ้นไป เมื่อแบ่งดังกล่าวเกิดขึ้น มีขอบแนวนอน และระยะห่าง และเส้น ขอบแนวตั้งใด ๆ เท่ากัน ก่อนกล่องแรก และ หลังกล่องสุดท้าย พิจารณาเอกสารที่ มีกฎต่อไปนี้สำหรับองค์ประกอบ em:{เอ็ม ขอบ: 0 2em เซลล์: 0 1em ขอบ: 1px จุดสีฟ้า}นี้จะให้เค้าโครงค่อนข้างเหมือนที่เห็นในรูปที่ 3 เมื่อองค์ชายเสียไปหลายบรรทัดรูปที่ 3: ระยะห่าง ระยะขอบ และขอบใช้ที่เกิดการแบ่งเป็นไปตามแนวของไลน์กล่องภายในกล่องบรรทัด encompassing ในแนวตั้งชิดคุณสมบัติ ค่าเริ่มต้นคือ พื้นฐาน ซึ่งหมายความ ว่า กล่องในแนวเดียวกันมีการจัดตำแหน่งให้วางเส้นของข้อความ พื้นฐานเป็นบรรทัดจำนวนจินตภาพในตัวอักษรที่ไม่ยืน descenders มันถูกวางไว้ห่างบางด้านบนด้านล่างของกล่องรายการจะออกจากห้อง descenders ของอักษรตัวพิมพ์เล็ก ดังที่แสดงในรูปที่ 4รูปที่ 4: อักษรยืนบนพื้นฐานจำนวนจินตภาพโปรดทราบว่า การจัดตำแหน่งแนวตั้งคุณสมบัติใช้ได้กับกล่องแบบอินไลน์และเซลล์เท่านั้น และมันไม่ได้สืบทอดมา รูปที่ 5 แสดงภาพบางขนาดเล็ก มีแนวแตกต่างกันรูปที่ 5: ภาพวางโดยใช้การตั้งค่าในแนวตั้งชิดคุณสมบัติ CSSเมื่อรวมความกว้างของกล่องในแนวเดียวกันภายในกล่องบรรทัดน้อยกว่าความกว้างของกล่องรายการตัวเอง การจัดตำแหน่งแนวนอนจะถูกควบคุมโดยการจัดตำแหน่งข้อความคุณสมบัติการ มี text-align: ชิดขอบ ใส่พื้นที่พิเศษระหว่างกล่องในแนวเดียวกัน ถ้าจำเป็น เพื่อให้เนื้อหาทั้งซ้าย และขวาให้อยู่ชิดกัน คุณสมบัตินี้ใช้กับกล่องบล็อก เซลล์ และบล็อกไลน์ และเป็นการสืบทอด — รูปที่ 6 แสดงผลของการใช้ค่าที่แตกต่างของการจัดตำแหน่งข้อความแห่งข้อความภายในเซลล์รูปที่ 6: การควบคุมการจัดตำแหน่งของข้อความจัดตำแหน่งข้อความคุณสมบัติการตำแหน่งสัมพัทธ์ตำแหน่งสัมพัทธ์คือ โครงร่างที่วางตำแหน่งใน CSS แต่ก็เพิ่มมากขึ้นอย่างใกล้ชิดที่เกี่ยวข้องกับคง "วางตำแหน่ง" กว่ากับลูกพี่ลูกน้องของ — แน่นอน และคงตำแหน่ง ก่อนมีวางองค์ประกอบที่ มีตำแหน่ง: ญาติออกเหมือนองค์ประกอบใด ๆ คง บล็อกระดับหรือในแนวเดียวกัน แต่แล้ว สิ่งที่น่าสนใจเกิดขึ้น: กล่องสร้างจะเปลี่ยนตามด้านบน ล่าง ซ้าย และขวาสิ่งที่ต้องจำเกี่ยวกับการวางตำแหน่งแบบสัมพัทธ์คือ ว่า มันเป็นเพียงกล่องที่สร้างที่จะเปลี่ยน องค์ประกอบยังคงอยู่ที่มันเป็นกระแสคงที่เอกสาร ถูก "ใช้พื้นที่" เป็นที่องค์ประกอบอื่น ๆ เกี่ยวข้อง ซึ่งหมายความ ว่า กล่องถูกเลื่อนอาจท้ายการทับซ้อนขององค์ประกอบอื่น ๆ กล่อง เนื่องจากพวกเขายังคงทำหน้าที่เหมือนค่อนข้างองค์ประกอบยังคงอยู่ที่มันควรจะมี ก่อนตำแหน่งใช้ เป็นที่เกี่ยวข้อง การไหลเวียนเอกสารองค์ประกอบมีไม่ย้าย — มันเป็นเพียงภาพผลลัพธ์ที่แสดงกล่องย้าย ลองดูได้ในทางปฏิบัติคัดลอกโค้ด HTML ด้านล่างนี้ลงในเอกสารใหม่ในตัวแก้ไขข้อความที่ชื่นชอบ และบันทึกเป็น relative.html ตำแหน่งสัมพัทธ์ Lorem ipsum dolor นั่ง amet consectetuer adipiscing elit Curabitur feugiat feugiat purus Aenean eu metus Nulla facilisi Pellentesque quis justo vel มัสสา suscipit sagittis คลา aptent taciti sociosqu โฆษณา litora torquent ต่อนอสต conubia ต่อ inceptos hymenaeos Quisque mollis, justo vel rhoncus aliquam

ผลลัพธ์ (ไทย) 2:

CSS
ตำแหน่งคงที่และญาติเนื้อหา[ซ่อน] 
1 บทนำ
2 โลกมหัศจรรย์ของรูปสี่เหลี่ยม
3 ตำแหน่งคงที่
3.1 บล็อกรูปแบบกล่อง
3.2 ​​กล่องรูปแบบอินไลน์
4 ตำแหน่งสัมพัทธ์
4.1 รูปแบบหลายคอลัมน์ที่มีความต้องการสั่งซื้อแหล่ง
4.1.1 คอลัมน์ทำ
4.1.2 การทำงานรอบ นิสัยใจคอใน Internet Explorer
4.2 ใช้อื่น ๆ เพื่อให้ได้ตำแหน่งญาติ
5 สรุป
6
คำถามที่ออกกำลังกายบทนำในบทความนี้หลักสูตรมาตรฐานเว็บฉันจะเริ่มต้นมองในเชิงลึกที่วิธีการที่คุณสามารถใช้CSS เพื่อตำแหน่งองค์ประกอบ HTML ใดก็ตามที่คุณต้องการบนหน้าใช้ CSS ตำแหน่ง . ทรัพย์สินและคุณสมบัติบางอย่างที่เกี่ยวข้องกับสถานที่ให้บริการตำแหน่งในCSS มีสี่ค่าตามกฎหมาย (นอกเหนือไปจากการเป็นมรดกแพร่หลาย): คงญาติแน่นอนและคงที่ ค่าเหล่านี้มีผลกระทบอย่างมีนัยสำคัญเกี่ยวกับวิธีการองค์ประกอบที่มีการแสดง สองค่าคงที่และญาติมีความเกี่ยวข้องกับเราและเราจะดูเป็นผู้ที่อยู่ในรายละเอียดมากในบทความนี้ ค่าที่แน่นอนและคงที่นอกจากนี้ยังมีความสัมพันธ์ใกล้ชิดและฉันจะบันทึกเหล่านั้นสำหรับบทความต่อไปในซีรีส์. โลกที่ยอดเยี่ยมของรูปสี่เหลี่ยมตอนนี้สำหรับบิตของการสรุปใน CSS และ HTML กล่องเป็นที่กล่าวถึงใน [ลอยของฉันและสำนักหักบัญชี บทความ] เอกสาร HTML ประกอบด้วยจำนวนขององค์ประกอบสลับกับข้อมูลตัวอักษร (ข้อความ) เมื่อเอกสารดังกล่าวจะแสดงผลบนหน้าจอคอมพิวเตอร์หรือพิมพ์บนกระดาษองค์ประกอบเหล่านั้นสร้างกล่องสี่เหลี่ยม เช่นเดียวกับชุดขององค์ประกอบ HTML จะแบ่งออกเป็นองค์ประกอบระดับบล็อกและองค์ประกอบแบบอินไลน์กล่องใน CSS เป็นหลักกล่องบล็อกหรือกล่องแบบอินไลน์. โดยค่าเริ่มต้นในตัวแผ่นลักษณะตัวแทนของผู้ใช้ในเบราว์เซอร์ที่ทำให้องค์ประกอบ HTML ระดับบล็อก เช่นพีและกล่อง div สร้างบล็อกในขณะที่องค์ประกอบแบบอินไลน์เช่นช่วงที่แข็งแกร่งและสร้างกล่องแบบอินไลน์ เราสามารถควบคุมชนิดของกล่องที่ถูกสร้างขึ้นโดยใช้สถานที่แสดงผล. กล่องที่เกิดจากองค์ประกอบในเอกสารที่มีการออกมาวางตามชุดที่กำหนดไว้อย่างชัดเจนของกฎในสเปค CSS2.1 กฎเหล่านั้นถูกเขียนขึ้นสำหรับคนที่ค่อนข้างไม่กี่คนที่เขียนซอฟต์แวร์เบราว์เซอร์ที่จะเรียนรู้วิธีการทำงาน CSS แต่ไม่ได้สำหรับพวกเราที่ออกแบบหน้าเว็บสำหรับการใช้ชีวิตหรืองานอดิเรก นี่คือเหตุผลที่หลักสูตรนี้ทั้งหมดที่มีอยู่! เป็นผลให้สเปคสามารถเป็นบิตยากที่จะเข้าใจ ในบทความนี้ผมจะพยายามที่จะอธิบายพื้นฐานในทางที่ดีเหมาะสำหรับนักออกแบบเว็บและนักพัฒนา. ตำแหน่งคงที่นี้เป็นจริงการเรียกชื่อผิด กล่องที่มีตำแหน่ง: คงไม่ได้จริงๆ "ตำแหน่ง" ที่ทุกคนในความรู้สึกของ CSS พวกเขาเป็นเพียงการออกมาวางเพื่อที่พวกเขาเกิดขึ้นในมาร์กอัปและใช้เวลาถึงเป็นห้องให้มากที่สุดเท่าที่พวกเขาต้องการนี้เป็นพฤติกรรมปกติที่คุณได้รับเมื่อคุณไม่สามารถใช้ CSS ใด ๆ เลยที่จะ HTML ของคุณ. มีความแตกต่างพื้นฐานในวิธีการที่ กล่องบล็อกออกมาวางไว้เมื่อเทียบกับวิธีการแบบอินไลน์กล่องออกมาวางไว้เพื่อให้ตรวจสอบทั้งสองประเภทหนึ่งที่เวลา ฉันจะเริ่มต้นกับกล่องบล็อกเพราะพวกเขาเป็นที่เรียบง่าย. รูปแบบกล่องที่ถูกบล็อกหากเราใช้ CSS การประกาศใด ๆ ที่เฉพาะเจาะจงกล่องบล็อกออกมาวางไว้ในแนวตั้งจากบนลงล่างเพื่อที่พวกเขาเกิดขึ้นในมาร์กอัป แต่ละกล่องจะเป็นปกติที่กว้างเป็นเอกสาร (องค์ประกอบร่างกาย) แต่แม้ว่าเราจะทำให้พวกเขาแคบพวกเขาจะไม่ออกมาวางเคียงข้างกันแม้ว่าจะมีห้องพัก; พวกเขาจะยังคงออกมาวางหนึ่งด้านล่างอื่น ๆ คุณสามารถคิดว่ามันเป็นถ้ากล่องแต่ละบล็อกมีเส้นแบ่งนัยก่อนและหลังจากที่มันเพื่อให้แน่ใจว่ามันจะจบลงใน "สาย" ของตัวเอง. ระยะทางแนวตั้งระหว่างสองกล่องบล็อกจะถูกควบคุมโดยคุณสมบัติขอบล่าง ของกล่องแรกและทรัพย์สินขอบด้านบนของกล่องที่สอง (ที่คุณเคยเห็นวิธีการจัดการเหล่านี้ก่อนหน้านี้ในการเรียนการสอน) สำหรับกล่องในการไหลปกติเช่นกล่องที่ไม่ได้ลอยหรือตำแหน่งอย่างขอบแนวตั้งระหว่างสองกล่องบล็อกที่อยู่ติดกันจะยุบ-ทับซ้อน-เพื่อให้ผลกำไรไม่ได้เป็นผลรวมของทั้งสองอัตรากำไรขั้นต้น แต่หมายถึง . สองเท่าที่เห็นในรูปที่ 1 ด้านล่างพิจารณาต่อไปส่วนHTML:
















วรรคนี้มี 40px ระยะขอบด้านล่าง
วรรคนี้มีขอบด้านบน 20px
เมื่อดูในเบราว์เซอร์, การล่มสลายอัตรากำไรขั้นต้นดังแสดงในรูปที่ 1 รูปที่ 1:. การล่มสลายของระยะห่างระหว่างทั้งสองอัตรากำไรขั้นต้นเป็น 40px ไม่ 60px กล่องบล็อกจะมีทั้งกล่องบล็อกอื่น ๆ เท่านั้นหรือกล่องแบบอินไลน์เท่านั้น ถ้าองค์ประกอบระดับบล็อกที่มีส่วนผสมของระดับบล็อกและเด็กซึ่งเป็นที่อนุญาตแบบอินไลน์แม้ว่าความหมาย questionable'so เรียกว่ากล่องบล็อกที่ไม่ระบุชื่อจะถูกสร้างขึ้นรวมไปถึงกล่องเด็กแบบอินไลน์เพื่อให้ผู้ปกครองมีเพียงกล่องบล็อกคุณสามารถระบุขนาดของกล่องบล็อกโดยใช้ความกว้างและคุณสมบัติสูง นอกจากนี้คุณยังสามารถตั้งค่าอัตรากำไรขั้นต้นทั้งแนวตั้งและแนวนอนกับพวกเขา เริ่มต้น (เริ่มต้น) ค่าสำหรับกว้างและความสูงเป็นอัตโนมัติและค่าเริ่มต้นสำหรับคุณสมบัติของอัตรากำไรขั้นต้นคือ ปัจจัยเหล่านี้ในการรวมกันหมายความว่ากล่องจะบล็อกโดยค่าเริ่มต้นจะเป็นกว้างเป็นแม่ดังแสดงในรูปที่ 2 รูปที่ 2: กล่องออกมาวางไว้ในแนวตั้งที่ถูกบล็อก. รูปแบบอินไลน์กล่องส่วนนี้อาจจะเป็นเรื่องยากที่จะเข้าใจว่าคุณกำลังใหม่เพื่อ CSS, แต่ไม่สิ้นหวังถ้าคุณไม่ได้รับมันเป็นครั้งแรกที่คุณอ่านมัน การทดลองเล็ก ๆ น้อย ๆ ด้วยตัวคุณเองน่าจะเป็นวิธีที่ดีที่สุดที่จะได้รับความเข้าใจที่มั่นคงของปัญหาเหล่านี้เพียงแค่ให้แน่ใจว่าคุณกำลังใช้ดีเบราว์เซอร์มาตรฐานเมื่อการทดสอบเช่น Opera หรือ Firefox. กล่องแบบอินไลน์จะถูกสร้างโดยค่าเริ่มต้น โดยองค์ประกอบ HTML แบบอินไลน์ แต่ยังมีกล่องแบบอินไลน์ที่ไม่ระบุชื่อที่สร้างขึ้นเพื่อให้ครอบคลุมเนื้อหาข้อความขององค์ประกอบ กล่องแบบอินไลน์ที่มีการออกมาวางในแนวนอนหนึ่งหลังจากที่อื่น ๆ ในลำดับที่พวกเขาเกิดขึ้นในมาร์กอัปที่ ทั้งนี้ขึ้นอยู่กับสถานที่ให้บริการทิศทางกล่องแบบอินไลน์จะอย่างใดอย่างหนึ่งออกมาวางจากซ้ายไปขวา (ทิศทาง: ltr) หรือจากขวาไปซ้าย (ทิศทาง: RTL). ทิศทางซ้ายไปขวาจะใช้กับตัวอย่างเช่นภาษายุโรป ขณะที่ทิศทางที่ถูกต้องไปซ้ายจะใช้กับภาษาเช่นภาษาอาหรับและภาษาฮิบรู ชุดของกล่องแบบอินไลน์ที่ทำขึ้นหนึ่งบรรทัดบนหน้าจอ (หรือกระดาษ) จะยังอยู่ในกรอบสี่เหลี่ยมอื่นที่รู้จักกันในกล่องสาย กล่องสายออกมาวางไว้ในแนวตั้งผู้ปกครองที่อยู่ในระดับบล็อกของพวกเขาที่มีช่องว่างระหว่างพวกเขา เราสามารถส่งผลกระทบต่อความสูงของกล่องเส้นผ่านสถานที่ให้บริการสายสูง. สำหรับกล่องแบบอินไลน์ที่เราไม่สามารถระบุขนาดใด ๆ เราสามารถระบุอัตรากำไรขั้นต้นในแนวนอน แต่อัตรากำไรขั้นต้นได้ในแนวตั้ง หากจำเป็นต้องกล่องแบบอินไลน์จะถูกแบ่งออกเป็นกล่องแบบอินไลน์หลายกระจายไปทั่วสองคนหรือมากกว่ากล่องสาย เมื่อแยกดังกล่าวเกิดขึ้นกำไรใด ๆ ในแนวนอนและช่องว่างภายในและเส้นขอบแนวตั้งได้จะนำไปใช้ก่อนที่ช่องแรกและหลังกล่องที่ผ่านมา พิจารณาเอกสารที่มีกฎต่อไปนี้สำหรับองค์ประกอบ em นี้: em {margin: 0 2em; padding: 0 1em; ชายแดน: 1px ประสีฟ้า;} นี้จะทำให้คุณมีรูปแบบคล้ายที่เห็นในรูปที่ 3 เมื่อองค์ประกอบสไตล์จะแตก ในช่วงหลายบรรทัด. รูปที่ 3:. ขอบรองชายแดนและใช้ไม่ได้ที่เกิดขึ้นแบ่งการจัดตำแหน่งแนวตั้งของกล่องแบบอินไลน์ภายในกล่องสายครอบคลุมจะถูกกำหนดโดยสถานที่ให้บริการในแนวตั้งชิด ค่าเริ่มต้นคือพื้นฐานซึ่งหมายความว่ากล่องแบบอินไลน์มีความสอดคล้องเพื่อให้เส้นเขตแดนข้อความของพวกเขาบรรทัดขึ้น พื้นฐานเป็นเส้นสมมุติที่ตัวอักษรโดยไม่ต้อง descenders ยืน มันเป็นเรื่องที่อยู่เหนือระยะทางบางด้านล่างของกล่องสายที่จะออกจากห้องพักสำหรับ descenders ของตัวอักษรตัวพิมพ์เล็กดังแสดงในรูปที่ 4 รูปที่ 4:. จดหมายยืนอยู่บนพื้นฐานจินตนาการทราบว่าสถานที่ให้บริการแนวตั้งจัดนำไปใช้inline กล่องและ เซลล์ตารางเท่านั้นและจะไม่ได้รับมรดก รูปที่ 5 แสดงให้เห็นภาพเล็ก ๆ บางคนที่มีแนวตั้งที่แตกต่างกัน. รูปที่ 5:. รูปภาพที่วางใช้การตั้งค่าของแนวตั้งจัดสถานที่ให้บริการ CSS เมื่อความกว้างทั้งหมดของกล่องแบบอินไลน์ภายในกล่องสายน้อยกว่าความกว้างของกล่องสายเอง การจัดตำแหน่งในแนวนอนจะถูกควบคุมโดยสถานที่ให้บริการ text-align ด้วย text-align: ปรับพื้นที่พิเศษจะถูกแทรกระหว่างกล่องแบบอินไลน์ในกรณีที่จำเป็นเพื่อให้เนื้อหาทั้งซ้ายและขวาเป็นธรรม สถานที่ให้บริการนี้จะใช้เพื่อป้องกันกล่องเซลล์ตารางและบล็อกแบบอินไลน์และเป็นที่ได้รับการถ่ายทอดรูปที่ 6 แสดงให้เห็นถึงผลของการใช้ค่าที่แตกต่างของทรัพย์สิน text-align เป็นข้อความภายในเซลล์ตาราง. รูปที่ 6: การควบคุมการจัดตำแหน่งของข้อความโดยใช้ข้อความ -align ทรัพย์สิน. ตำแหน่งสัมพัทธ์ตำแหน่งสัมพัทธ์เป็นโครงการที่การวางตำแหน่งใน CSS แต่มันก็มากขึ้นเกี่ยวข้องกับการคงที่ "ตำแหน่ง" กว่าด้วยญาติ-แน่นอนและการวางตำแหน่งถาวร องค์ประกอบกับตำแหน่ง: ญาติจะวางครั้งแรกเช่นเดียวกับองค์ประกอบคงที่ใด ๆ ระดับบล็อกหรือแบบอินไลน์ แต่แล้วสิ่งที่น่าสนใจเกิดขึ้น: กล่องที่สร้างขึ้นจะเลื่อนตามไปด้านบนด้านล่างด้านซ้ายและคุณสมบัติที่ถูกต้อง. สิ่งที่ต้องจำเกี่ยวกับการวางตำแหน่งญาติก็คือว่ามันเป็นเพียงกล่องสร้างที่จะเลื่อน องค์ประกอบยังคงอยู่ที่มันเป็นในการไหลแบบคงที่เอกสาร นั่นคือสิ่งที่มันว่า "ใช้พื้นที่" เท่าที่องค์ประกอบอื่น ๆ ที่มีความกังวล ซึ่งหมายความว่ากล่องเปลี่ยนอาจจะจบลงที่ทับซ้อนกันกล่ององค์ประกอบอื่น ๆ เพราะพวกเขายังคงทำหน้าที่เหมือนองค์ประกอบที่ค่อนข้างตำแหน่งยังคงอยู่ที่มันควรจะเป็นก่อนที่จะวางตำแหน่งที่ถูกนำมาใช้ เท่าที่ไหลของเอกสารที่เกี่ยวข้ององค์ประกอบยังไม่ได้ย้ายมันเป็นเพียงปลายผลภาพที่แสดงให้เห็นกล่องที่ถูกย้าย ลองดูที่มันในทางปฏิบัติ. คัดลอกโค้ด HTML ด้านล่างลงในเอกสารใหม่ในโปรแกรมแก้ไขข้อความที่คุณชื่นชอบและบันทึกเป็น relative.html





































Relative Positioning


Lorem Ipsum ไม่ได้บังคับ Amet นั่ง consectetuer adipiscing Elit.
Curabitur feugiat feugiat Purus.
Aenean eu Metus nulla facilisi.
Pellentesque โฟน Justo หรือ massa suscipit sagittis.
ชั้น aptent taciti sociosqu โฆษณา litora torquent ต่อ conubia สโตรคต่อ inceptos hymenaeos.
เมืองที่อยู่อ่อน, Justo หรือ rhoncus แบ่งปัน

ผลลัพธ์ (ไทย) 3:

CSS แบบคงที่และญาติตำแหน่ง
เนื้อหารึเปล่า [ ซ่อน ] รึเปล่า
1 บทนำ
2 โลกมหัศจรรย์ของรูปสี่เหลี่ยม
3 สถิตตำแหน่ง
3.1 บล็อกรูปแบบกล่องในรูปแบบกล่อง
4
3
4.1 ญาติตำแหน่งคอลัมน์หลายรูปแบบกับแหล่งที่มาเพื่อความต้องการ
4.1.1 ทำคอลัมน์ของทำงานอยู่ค่า

ใน Internet Explorer สำหรับอื่น ๆ ใช้สำหรับญาติตำแหน่ง

6
5 สรุปการออกกําลังกายคำถามบทนำ

ในเว็บมาตรฐานหลักสูตรบทความผมจะเริ่มมองในเชิงลึกที่วิธีการที่คุณสามารถใช้ CSS เพื่อองค์ประกอบ HTML ตำแหน่งทุกที่ที่คุณต้องการบนหน้าโดยใช้ตำแหน่ง CSS คุณสมบัติและคุณสมบัติ .
ตำแหน่งคุณสมบัติ CSS ได้สี่กฎหมายค่า ( นอกจากแพร่หลายสืบทอด ) : คงที่สัมพัทธ์ที่สมบูรณ์ และถาวรค่าเหล่านี้จะมีผลกระทบอย่างมีนัยสำคัญในองค์ประกอบจะแสดงผล สองค่าคงที่และ ญาติมีความสัมพันธ์อย่างใกล้ชิด และเราจะมองเข้าไปในรายละเอียดที่ดีในบทความนี้ ค่าที่แน่นอนและคงยังเกี่ยวข้องอย่างใกล้ชิด และจะช่วยให้บทความต่อไปในชุด โลกมหัศจรรย์ของรูปสี่เหลี่ยม

ตอนนี้สำหรับบิตของการสรุปใน CSS และ HTML ในกล่อง ,ตามที่กล่าวไว้ใน [ ลอย และการล้างบทความ ] เอกสาร HTML จะประกอบด้วยองค์ประกอบสลับกับข้อมูลอักขระ ( Text ) เมื่อมีเอกสารที่แสดงบนหน้าจอคอมพิวเตอร์ หรือพิมพ์บนกระดาษ องค์ประกอบเหล่านั้นสร้างกล่องสี่เหลี่ยม เป็นชุดขององค์ประกอบ HTML แบ่งออกเป็นระดับบล็อกองค์ประกอบและองค์ประกอบในบรรทัดกล่องใน CSS เป็นหลักให้บล็อกกล่องหรือกล่อง Inline .
โดยค่าเริ่มต้น ในตัวแทนผู้ใช้สไตล์ชีตในเบราว์เซอร์ ทำให้ระดับบล็อกองค์ประกอบ HTML เช่น P และ DIV สร้างกล่องบล็อก ในขณะที่องค์ประกอบในบรรทัดเช่นที่แข็งแกร่งและช่วงสร้างกล่องในบรรทัด เราสามารถควบคุมชนิดของกล่องที่ถูกสร้างขึ้นโดยใช้คุณสมบัติแสดง .
กล่องที่สร้างโดยองค์ประกอบในเอกสารจะแสดงตามชุดของกฎที่กำหนดไว้อย่างชัดเจนใน css2.1 สเปค กฎมีไว้เพื่อค่อนข้างน้อยคนที่เขียนซอฟต์แวร์เบราว์เซอร์เรียนรู้ CSS ทำงานนะ ไม่ใช่สำหรับคนที่ออกแบบหน้าเว็บเป็นอาชีพหรืองานอดิเรก นี่คือเหตุผลที่หลักสูตรทั้งหมดนี้มีอยู่แล้ว ! ผลคุณสมบัติสามารถเป็นบิตยากที่จะเข้าใจ ในบทความนี้ผมจะพยายามที่จะอธิบายพื้นฐานในทางที่เหมาะสำหรับนักออกแบบเว็บและนักพัฒนา .

คงตำแหน่งนี้คือการเรียกชื่อผิดจริงๆ กล่องตำแหน่ง : คงที่ไม่ได้จริงๆ " วาง " ที่ทุกคนใน CSS เลย