Hướng dẫn css extend element beyond parent - phần tử mở rộng css ngoài cha mẹ

Tôi đang cố gắng mở rộng div này với chiều rộng của trình duyệt. Tôi đã đọc từ đây rằng bạn có thể sử dụng {position:absolute; left: 0; right:0;} để đạt được điều đó như trong jsfiddle ở đây: http://jsfiddle.net/bjbgj/3/

Nhưng vấn đề là #container hiện tại của tôi có thuộc tính {position:relative;} và do đó nếu tôi áp dụng {position:absolute} cho trẻ em div, nó sẽ chỉ đề cập đến #container. Có cách nào để vẫn mở rộng con trai của tôi vượt ra ngoài #container không?

Tylerh

Huy hiệu vàng 20.4K6060 gold badges75 silver badges94 bronze badges

Hỏi ngày 11 tháng 10 năm 2012 lúc 22:44Oct 11, 2012 at 22:44

2

Tôi có thể nghĩ ra năm cách để có khả năng hoàn thành mục tiêu của bạn:

1. Sử dụng tỷ suất lợi nhuận âm trên phần tử bên trong để di chuyển nó ra bên ngoài cha mẹ

2. Sử dụng JavaScript để di chuyển phần tử bên trong bên ngoài cha mẹ.

3. Thay đổi mã nguồn và di chuyển phần tử bên trong bên ngoài cha mẹ.

4. Sử dụng position: fixed trên phần tử bên trong. Điều này sẽ cho phép phần tử bên trong bị phá vỡ nhưng có mặt dưới là phần tử sẽ được cố định ở vị trí đã cho (không bao giờ di chuyển).

5. Xóa position: relative; khỏi phần tử cha hoặc cho phần tử cha một position: static

Đã trả lời ngày 11 tháng 10 năm 2012 lúc 23:20Oct 11, 2012 at 23:20

BrettbrettBrett

2.38318 Huy hiệu bạc29 Huy hiệu đồng18 silver badges29 bronze badges

0

Bạn có thể thử thêm {position:absolute; left: 0; right:0;}0 vào cha mẹ {position:absolute; left: 0; right:0;}1, sau đó làm cho đứa trẻ rộng hơn cha mẹ.

Đã trả lời ngày 12 tháng 10 năm 2012 lúc 0:24Oct 12, 2012 at 0:24

JulesjulesJules

Badges vàng 14K1353 Huy hiệu bạc97 Huy hiệu đồng13 gold badges53 silver badges97 bronze badges

Phụ huynh đến {position:absolute; left: 0; right:0;}2, con đến {position:absolute; left: 0; right:0;}3 hoặc

Phụ huynh đến {position:absolute; left: 0; right:0;}4, con đến {position:absolute; left: 0; right:0;}5 (với mục đích cố định, không bao giờ di chuyển)

{position:absolute; left: 0; right:0;}6 của bạn hoạt động với cả hai giải pháp này, chỉ cần lưu ý rằng DIV con của bạn sẽ rút ra trên bất kỳ div nào bên dưới mã trong mã, bất kể thuộc tính {position:absolute; left: 0; right:0;}7 của Div được đặt thành gì. Bạn sẽ phải thêm giá trị {position:absolute; left: 0; right:0;}8 vào div tiếp theo để bù (ví dụ đơn giản trong jsfiddle) hoặc một div khác bên dưới có hành vi chiều cao giống như đứa trẻ (một ví dụ công phu hơn nhiều trong codepen), có lẽ không lý tưởng , nhưng hoạt động trong HTML/CSS đơn giản.

Đã trả lời ngày 20 tháng 7 năm 2018 lúc 5:51Jul 20, 2018 at 5:51

Không có câu trả lời nào ở trên đề cập đến cách tốt nhất để thực hiện việc này, sử dụng {position:absolute; left: 0; right:0;}4 trên thùng chứa đầy đủ và #container0 trên div bên trong bất kỳ div tập trung/bù trừ nào, miễn là không có thùng chứa nào khác tuyên bố vị trí: tương đối, điều này sẽ hoạt động.

Đã trả lời ngày 24 tháng 1 lúc 14:26Jan 24 at 14:26

AgrushagrushAGrush

1.04711 huy hiệu bạc31 huy hiệu đồng11 silver badges31 bronze badges

Tôi đã có một trường hợp tôi cần phải làm một băng chuyền và có nó quấn bên ngoài yếu tố cha mẹ. Bạn có thể đặt phần tử con thành #container1 và đặt phần tử cha để có chiều rộng tối đa của một lượng pixel cụ thể ... hoặc số lượng tính toán. Với thiết lập này, thành phần con của chúng tôi mở rộng ra ngoài cha mẹ. JSfiddle

    .parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }

Đã trả lời ngày 17 tháng 4 năm 2019 lúc 16:34Apr 17, 2019 at 16:34