Đặt một "Hình ảnh" bên ngoài của một div, Ví dụ trong bài viết của tôi

Question

Được rồi, chúng ta hãy xem nếu tôi có thể giải thích những gì tôi muốn nói, đây là một hình ảnh để giúp:

Như bạn có thể nhìn thấy trong hình ảnh, tôi cần để có được mũi tên màu xanh lá cây từ vị trí hiện tại của nó để được đặt bên ngoài div chính nắm giữ nó. Tôi cần như vậy nếu trang được tái kích thước mũi tên sẽ ở lại vị trí của nó. Nếu bạn cần thêm thông tin, vui lòng cho tôi biết. Xin lỗi nếu điều này là quá mơ hồ, tôi đã không chắc chắn làm thế nào để giải thích nó. Cảm ơn!

Answer 1

Cung cấp phần tử vùng chứa position: relative; và sau đó cung cấp cho mũi tên position: absolute; top: 0; right: -x; (trong đó x là chiều rộng của mũi tên).

Dưới đây là một ví dụ: http://jsfiddle.net/joshnh/xpFPd/

Answer 2

Bạn cần áp dụng định vị tuyệt đối. Nếu nó sẽ luôn luôn là một khoảng cách liên tục từ trái hoặc phải thì điều này là dễ dàng.

img.class { 
    position: absolute; 
    right: 16px; 
} 

Ví dụ:

Answer 3

Bạn có thể sử dụng định vị tương đối:

parent { 
    position: relative; 
} 

parent img { 
    position: absolute; 
    left: 0px; 
} 

này sẽ đính kèm mỗi img để cạnh trái của mẹ.

Answer 4

Bạn cần phải sử dụng định vị tương đối-tuyệt đối.

Outer_div{ 
position: relative; 
. 
. 
. 
} 

img.inner{ 
position: absolute; 
. 
. 
. 
}