Positon co 4 thuộc tính:
- static
- absolute
- relative
- fixed
Static là thuộc tính mặc định
Static is the default position for any element on a Web page. If you don't define the position, it will be static and will display on the screen based on where it is in the HTML document and how it would display inside the normal flow of the document.
If you apply positioning rules like top or left to an element that has a static position, those rules will be ignored.
Absolute:
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.
The four positioning properties are:
To use them, you need to think of them as offset properties. In other words, an element positioned right 2em is not moved right 2em. It's right side is offset from the right side of the window 2em. The same is true for the other three.
Nếu dùng right với thuộc tính absolute 2em có nghĩa là
khoảng cách chính xác tính từ cạnh bên phải của cửa sổ window tới bên phải của đối tượng chứ ko phải là dịch sang phải 2em
offset có thể dịch là sự dịch chuyển hoặc bù đắp, khỏang chừa trống
Relative:
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
Giá trị relative dựa trên hướng đi bình thường dựa trên các thuộc tính cha nếu thuoc tính cha cũng theo hướng bình thường
Với right, left,top, bottom:
Từ hình trên ta có thể thấy right khỏang cách bao nhiêu phụ thuộc vào vị trí ban đầu trước khi có giá trị right, khác với absolute
Absolute và Relative
Fixed:
Fixed positioning is a lot like absolute positioning. The position of the element is calculated in the same way as the absolute model - from the sides of the view port. But fixed elements are then fixed in that location, like a watermark. Everything else on the page will then scroll past that element.
Cũng giống như absolute nhưng fixed thì sẽ luôn cố định xuất hiện trên window nếu bạn scroll
Sự khác nhau absolute và relative
Vấn đề Position luôn làm đau đầu với người mới tìm hiểu về position là absolute và relative:
- Đầu tiên ta coi ví dụ sau về absolute
http://www.yourhtmlsource.com/examples/positioning1.html
Source:
<html>
<body id="htmlsource">
<img src="../updates/progress/media/feature.gif" width="100" height="100" alt="Absolutely positioned image." border="1" style="position: absolute; top: 56px; right: 80px">
<img src="../updates/progress/media/feature.gif" width="100" height="100" alt="This image was placed here using css2 absolute positioning" border="1" style="position: absolute; top: 100px; left: 360px; ">
<p>See? That image to the right is <em>exactly</em> where I told it to be, in relation to this page. Oh, and I put in the border so you can see where the image edges go.</p>
<br><br><br><br><br><br>
<p>I can even obscure this text by placing an image on top of it like this. Hello? Hello?? Oh, good, I'm back. Do you see?</p>
<p>It's just a matter of trying out different values and getting the element exactly where you wanted it.</p>
</body>
</html>
Kết hợp với plugin firebug của FF để view source rõ thêm
- Giờ ta phân tích sự khác nhau cơ bản của 2 thuộc tính absolute và relative: đó là thẻ <HTML> và thẻ <BODY>
Ta sửa style hình 1 và 2 thành
:
hình 1: position: relative; left: 0pt; top: 0pt;
hình 2: position: absolute; left: 0pt; top: 0pt;
Ta dc kết quả: hình 1 dc kẻ khung đỏ
Phân tích thẻ <body>:
Đưa chuột vào thẻ body dc tô nền màu xanh, còn màu vàng là margin của thẻ body (coi thuộc tính thẻ body).
ta thấy hình 1 với thuộc tính relative nằm bên trong thẻ body, trong khi hình 2 thuộc tính absolute thì dc nằm trong thẻ <html>
Với hình 2 trong thẻ html:
Kết luận:
- Thuộc tính absolute chịu ảnh hưởng đầu tiên từ thẻ html và thuộc tính relative chịu ảnh hưởng đầu tiên từ thẻ body
- Đối với thuộc tính relative: sẽ chịu ảnh hưởng trực tiếp thẻ cha của nó mà ko từ thẻ <body> nữa nếu thẻ cha của nó dc khai báo thuộc tính relative
Link đọc thêm và có ví dụ:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
