Nếu bạn có ý nghĩa, bạn muốn thanh bên ngồi ở đầu trang, bắt đầu ở trên và bên phải của thanh điều hướng, như thế này ...
... Có hai cách dễ dàng và một cách khó hơn cũng mang lại những lợi thế khác.
1. position: absolute;
Đây là cách dễ dàng sạch nhất :
- Thêm
top: 0;, position: absolute;vào phần tử cần ngồi ở đầu trang (#beta) và thay thế float: right;bằng right: 0;( float: right;sẽ không hoạt động với position: absolute;nhưng right: 0;trong bối cảnh này sẽ tạo ra hiệu ứng tương tự)
- Có
position: relative;một yếu tố chứa toàn bộ trang (trên trang web của bạn, đó là #container-inner) và không có yếu tố nào ở giữa (vì vậy bạn cần xóa nó khỏi #pagebody- đã thử và nó không phá vỡ bất cứ thứ gì).
Các top: 0;của một position: absolute;phần tử sẽ được dựa trên các khu vực gần cha mẹ mà có position: relative;.
2. margin-top: -XXXpx;
Nếu vì một lý do nào đó bạn cần position: relative;đến div ở giữa (tôi không thể thấy lý do, nhưng người ta có thể xuất hiện), thì có một cách khác ít sạch hơn.
Chiều cao của phần điều hướng / tiêu đề là cố định, vì vậy bạn biết bạn muốn di chuyển thanh bên bao nhiêu pixel. Vì vậy, bạn chỉ có thể cung cấp cho thanh bên ( #beta) một lề trên âm của nhiều pixel (như margin-top: -350px;). Vấn đề duy nhất với kế hoạch này là, bạn cần điều chỉnh lề trên nếu bạn thay đổi chiều cao của tiêu đề.
3. Bố cục nội dung đầu tiên
Cuối cùng, giải pháp tốt nhất (nhưng đơn giản nhất) sẽ là chỉnh sửa mẫu HTML và di chuyển phần tử #nav xuống trong html để bên dưới nội dung trang như thanh bên #beta, sau đó, đặt một lề lớn lên trên alpha, tạo khoảng cách kích thước của phần #nav tiêu đề của bạn, sau đó tạo cả phần tử #nav và thanh bên #beta position: absolute;và top: 0;(kiểm tra position: relative;s như trên) và đảm bảo rằng #nav có kích thước chính xác để lấp đầy lỗ.
Nói chung tốt hơn là có thể có các yếu tố phi nội dung bên dưới nội dung chính trong HTML - điều đó có nghĩa là những người có trình đọc màn hình nghe thấy nội dung thú vị mà họ tìm đến trước danh sách các liên kết sẽ đi tới và một số công cụ tìm kiếm có trọng lượng lớn hơn theo các điều khoản trước đó trong đánh dấu (tôi khá chắc chắn điều này vẫn đúng).
Để đọc thêm, đây là một bài viết đơn giản về bố cục nội dung đầu tiên và đây là một ví dụ trong bối cảnh thiết kế 'đáp ứng' hoạt động cho thiết bị di động và máy tính để bàn .
