Làm cách nào để mở rộng nền của phần tử ngoài vùng chứa?

Question

Tôi có một thẻ div có chứa thẻ h3 và tôi muốn nền của h3 mở rộng ra ngoài thẻ div chứa vào cạnh của trang. Có cách nào để làm điều này trong CSS?
Tôi đã xem xét hoàn toàn định vị h3, nhưng tôi không biết kích thước từ mép màn hình đến cạnh của div (nơi tôi muốn nó) vì div được căn giữa.

Answer 1

Thật không may những gì bạn đang cố gắng làm là không thể với CSS đồng bằng vì bạn cần phải biết khoảng cách đến cạnh phải. Định vị tuyệt đối sau đó sẽ hoạt động tốt. Tất nhiên, bạn có thể làm điều này dễ dàng sử dụng một số JavaScript, và thậm chí dễ dàng hơn nếu sử dụng jQuery:

$(function() { 
    $('h3').each(function() { 
     $(this).width($(window).width() - $(this).offset().left); 
    }); 
}); 

Và trong CSS:

h3 { 
    position: absolute; 
    ... 
} 

Answer 2

Nền yếu tố không thể mở rộng ra ngoài hộp giới hạn của nó.

Bạn có thể trong một số trường hợp mở rộng H3 ngoài vùng chứa của nó bằng cách đặt lề phủ định, nhưng bạn sẽ cần độ rộng chính xác của trang.

Có vẻ như bạn chỉ muốn tổ chức lại HTML của mình để thực hiện điều này.

Answer 3

Trên trang này, tôi sử dụng Firebug để thay đổi css tiêu đề câu hỏi của .

#question-header h2 { 
    background:lime; 
    margin-bottom:-1000px; 
    padding-bottom:1000px; 
} 

Đây là những gì đã xảy ra: alt text http://public.zastica.com/so-background.png

Có một câu hỏi #-header div mà chỉ kéo dài đến phía trên cùng của câu hỏi ("Tôi có một div ..."). Điều quan trọng là có một đáy đệm lớn và đáy (âm) lớn.

Điều này cũng hoạt động đối với hình nền song song. Bạn chỉ cần đảm bảo rằng vùng chứa không có số overflow: hidden.

Edit: Để hiệu ứng này trái và phải, hãy đặt:

html { 
    overflow-x: hidden; 
} 

#question-header h2 { 
    padding: 0 1500px; 
    margin: 0 -1500px; 
} 

Các html { overflow-x: hidden; } ngăn chặn chiều rộng trang từ nhận thực sự lớn do padding.