Vị trí là gì: tương đối hữu ích cho?

Question

Tôi đã suy nghĩ về các chế độ định vị CSS ngày hôm nay và nhận ra rằng tôi không bao giờ sử dụng position:relative cho bất kỳ điều gì khác ngoài việc làm cho position:absolute hoạt động trên các phần tử con.

Tôi là một "nhà phát triển" nhiều hơn "nhà thiết kế", nhưng tôi đã thực hiện khá nhiều bố cục dựa trên CSS trong những năm qua. Tôi đã sử dụng bảng, float, lề (dương và âm), vị trí: tuyệt đối và thậm chí vị trí: cố định, nhưng tôi không nghĩ mình đã từng có dịp mà tôi đã sử dụng vị trí: tương đối để định vị thành phần.

Có một số kỹ thuật CSS-guru tuyệt vời dựa vào vị trí: tương đối (và được sử dụng trong các thiết kế trong thế giới thực) không? Tôi có bỏ lỡ không?

Answer 1

Sẽ rất hữu ích nếu bạn muốn bù đắp phần tử mà không bị xung quanh với lề và hậu quả của nó đối với các yếu tố khác. Giả sử bạn muốn cố tình để một hình ảnh được đẩy ra khỏi mặt bên của một thùng chứa và (gần như) chồng lên nhau với một số nội dung trong một thùng chứa bên cạnh nó.

------------- ----- 
|   | | | 
| X -------| Y | 
|  | a || | 
|  -------| | 
------------- ----- 

container a là một phần của dòng chảy văn bản bình thường của X và bạn muốn giữ nó theo cách đó, bạn chỉ muốn nó thò ra bên một chút như là một tác gọn gàng. Nếu bạn làm điều đó với lợi nhuận, nó có thể nhận được thực sự lộn xộn và reflow một số nội dung khác của bạn.
Bằng cách sử dụng position: relative; left: 10px; bạn có thể nhận được hiệu ứng đó một cách dễ dàng mà không có các tác dụng phụ.

Answer 2

Tôi đã sử dụng nó nhiều hơn một lần để hiển thị những thứ như hình ảnh tiêu đề, một cái gì đó như:

<div id="header"> 
    <div id="logo"></div> 
<div> 

CSS:

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); } 
#logo { position: relative; left: 40px; background: url(logo.jpg); } 

Trong trường hợp này phần đầu có sọc lớn tất cả các cách trên một hình nền, logo nằm trong sọc chỉ bù đắp một chút. Đơn giản hơn padding/margin trong một số trường hợp để thay đổi công cụ xung quanh một chút tôi nghĩ, có lẽ nó chỉ là ý kiến.

Answer 3

Tôi chủ yếu sử dụng nó khi tôi muốn định vị một số phần tử tuyệt đối liên quan đến phần tử gốc của nó. Trong trường hợp đó, phần tử gốc cần được đặt thành position: relative. Đó là nơi nó được cho.

Hơn nữa, tôi cũng sử dụng nó ở đây và ở đó để khắc phục lỗi IE6/7/lỗi nhấp nháy trong các phần tử khối có hình nền.

Answer 4

Tôi đã sử dụng posotion: relative trong quá khứ cho phần tử vùng chứa, với các phần tử được định vị hoàn toàn bên trong nó (như bố cục cột ba cột). Ví dụ:

alt text http://www.freeimagehosting.net/uploads/2573654d07.png

tôi không cung cấp cho bất kỳ container bù đắp, nhưng đặt nó với position: relative cho phép tôi hoàn toàn vị trí của các cột liên quan đến thùng sơn. Nếu vùng chứa được đặt thành position: static, theo mặc định, các cột sẽ được định vị hoàn toàn tương ứng với chế độ xem trình duyệt, không phải vùng chứa.

Answer 5

Tôi sử dụng position:relative; để các ký tự siêu âm vẫn có thể lên trên vertical-align: top; nhưng không cho phép chúng gây rối với phần đầu của các đoạn văn của tôi.

sup { 
    font-size: .7em; 
    vertical-align: top; 
    position: relative; 
    top: -.1em; 
}