Hiển thị phần tử con phía trên phần tử cha bằng cách sử dụng CSS

Question

Tôi có hai div, một phần tử lồng nhau bên trong phần tử kia. Phần tử gốc có chiều rộng/chiều cao được xác định. Làm thế nào tôi có thể hiển thị div con trên cha mẹ (bên ngoài của nó) bằng cách sử dụng chỉ CSS?

EDIT: Xin lỗi, có lẽ tôi nên làm rõ rằng tôi có nghĩa là "ở trên" dọc theo trục z. Và vâng, tôi đã thử chỉ mục z. Vấn đề của tôi là khi phần tử con lớn hơn cha mẹ, nó sẽ dẫn đến hiệu ứng "khung" hoặc "cửa sổ", cắt bỏ một phần của div.

Answer 1

Đặt overflow: visible; trên div cha.

#parent { 
    overflow: visible; 
} 

Thay đổi để phản ánh cập nhật của người hỏi.

Answer 2

Nếu bạn chắc chắn bạn cần thực hiện việc này, hãy thử đặt

lề trên: -100px; trên phần tử con hoặc nhiều px là cần thiết để làm cho nó xuất hiện ở trên.

Answer 3

Bạn có thể sử dụng định nghĩa vị trí để xác định vị trí tương đối hoặc hoàn toàn trên trang. IE:

Để hiển thị trực tiếp ở trên, bạn sẽ thay thế 100px trong tuyên bố này bằng kích thước của hộp con.

 
.child{ 
    position: relative; 
    top: -100px; 
} 

Answer 4

Hãy làm theo cách này:

.child { 
position: absolute; 
margin: -100px; 
} 

Sử dụng position: absolute sẽ thoát khỏi không gian trống để lại bởi đứa trẻ khi nó được chuyển lên.

Chỉnh sửa - sau khi đọc bản cập nhật của bạn: vị trí: tuyệt đối vẫn áp dụng cho trường hợp này. Nó đưa đứa trẻ ra khỏi cha mẹ. Sau đó, bạn sử dụng các lề để định vị nó theo cách bạn muốn.

Bằng cách này, bạn có thể làm cho trẻ lớn hơn cha mẹ và trên đó.

.parent{ 
height: 50px; 
width: 50px; 
} 
.child { 
position: absolute; 
height: 100px; 
width: 100px; 
margin: -75px 0 0 -75px; 
} 

Answer 5

Tương tự như những gì Chacha nói, bạn nên cung cấp cho cha mẹ một vị trí tương đối và đứa trẻ một vị trí tuyệt đối, sau đó cung cấp cho trẻ hàng đầu: -100px.

Bố mẹ có thiết lập tràn để ẩn không? Điều đó có thể cản trở nỗ lực của bạn.

Answer 6

Bạn có thể đặt lề âm cho phần tử gốc của mình, được bù đắp bằng phần đệm - ví dụ: lề trái: -100px; padding-left 100px. Điều đó sẽ cung cấp cho bạn 100px bên trái, nơi đứa trẻ có thể chồng lên nhau và vẫn còn trên đầu trang.