Floating Div Over An Image

Question

Tôi đang gặp sự cố khi di chuyển hình ảnh trên một hình ảnh. Đây là một fiddle về những gì tôi đang cố gắng để hoàn thành: http://jsfiddle.net/dChUR/

HTML:

<div class="container"> 
    <div class="tag">Featured</div> 
    <img src="http://www.placehold.it/200x200"> 
</div> 

CSS:

.container { 
    border: 1px solid #DDDDDD; 
    width: 200px; 
    height: 200px; 
} 
.tag { 
    float: left; 
    position: relative; 
    left: 0px; 
    top: 0px; 
    z-index: 1000; 
    background-color: #92AD40; 
    padding: 5px; 
    color: #FFFFFF; 
    font-weight: bold; 
} 

Trong hình ảnh này:

Tôi muốn hộp "Nổi bật" nổi trên đầu hình ảnh nhưng thay vào đó nó có vẻ "xóa" phần nổi và khiến hình ảnh bị quấn vào dòng tiếp theo, như thể nó được hiển thị dưới dạng phần tử khối. Thật không may, tôi không thể tìm ra những gì tôi đang làm sai. Bất kỳ ý tưởng?

Answer 1

Không bao giờ thất bại, khi tôi đăng câu hỏi lên SO, tôi nhận được một số thời điểm khai sáng "aha" và tìm ra. Giải pháp:

HTML:

<div class="container"> 
    <div class="tag">Featured</div> 
    <img src="http://www.placehold.it/200x200"> 
</div> 

CSS:

.container { 
    border: 1px solid #DDDDDD; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 
.tag { 
    float: left; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 1000; 
    background-color: #92AD40; 
    padding: 5px; 
    color: #FFFFFF; 
    font-weight: bold; 
} 

Điều quan trọng là các thùng chứa phải được bố trí tương đối và thẻ vị trí tuyệt đối.

Answer 2

Thay đổi vị trí của bạn một chút:

.container { 
    border: 1px solid #DDDDDD; 
    width: 200px; 
    height: 200px; 
    position:relative; 
} 
.tag { 
    float: left; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background-color: green; 
} 

jsFiddle example

Bạn cần phải thiết lập vị trí tương đối trên thùng và sau đó tuyệt đối trên thẻ div bên trong. Định vị tuyệt đối của thẻ bên trong sẽ liên quan đến div bên ngoài tương đối vị trí. Bạn thậm chí không cần quy tắc z-index trên thẻ div.

Answer 3

Bạn có ý tưởng đúng. Có vẻ như tôi chỉ cần thay đổi .tag 's position:relative thành position:absolute và thêm position:relative vào .container.

Answer 4

bạn có thể xem xét sử dụng tính tương đối Tuyệt đối và Tuyệt đối.

`.container { 
position: relative; 
} 
.tag {  
position: absolute; 
}` 

Tôi đã thử nghiệm nó ở đó, còn nếu bạn muốn nó để thay đổi vị trí của nó sử dụng như là biên độ của nó:

top: 20px;
left: 10px;

Nó sẽ đặt nó 20 pixel từ đầu và 10 pixel từ trái ; nhưng để lại cái này nếu không cần thiết.

Answer 5

Thực ra chỉ cần thêm lề dưới: -20px; vào lớp thẻ đã sửa nó ngay lập tức.

http://jsfiddle.net/dChUR/7/

yếu tố khối Là, biên giới tự nhiên đã xác định div rằng họ cố gắng không để vi phạm. Để đưa chúng vào lớp ảnh, không có nội dung bên cạnh ảnh vì chúng không có thẻ đóng, bạn chỉ cần buộc chúng làm những gì chúng không muốn làm, như vi phạm ranh giới tự nhiên của chúng.

.container { 
    border: 1px solid #DDDDDD; 
    width: 200px; 
    height: 200px; 
    } 
.tag { 
    float: left; 
    position: relative; 
    left: 0px; 
    top: 0px; 
    background-color: green; 
    z-index: 1000; 
    margin-bottom: -20px; 
    } 

Một cách khác để thực hiện là tạo div bằng hình ảnh làm nền sau đó đặt nội dung vào bất cứ nơi nào bạn muốn.

<div id="imgContainer" style=" 
     background-image: url("foo.jpg"); 
     background-repeat: no-repeat; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -mox-background-size: cover; 
     -o-background-size: cover;"> 
    <div id="theTag">BLAH BLAH BLAH</div> 
</div>