在圖像上浮動Div

我無法在圖像上浮動div。這裏是什麼，我試圖完成一個小提琴：http://jsfiddle.net/dChUR/在圖像上浮動Div

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; 
}

在這張圖片：

enter image description here

我想要「精選」框浮在圖像的頂部，但它似乎「清除」浮動並導致圖像換行到下一行，就好像它顯示爲塊元素一樣。不幸的是，我無法弄清楚我做錯了什麼。有任何想法嗎？

來源

2013-08-20 Jeremy Harris

http://jsfiddle.net/dChUR/3/類似的東西？添加位置：相對於容器，位置：絕對框... – sinisake

永遠不會失敗，一旦我把這個問題發佈到SO，我會得到一些啓發性的「aha」時刻並找出答案。解決辦法：

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; 
}

的關鍵是，該容器具有被定位相對和標籤定位絕對。

來源

2013-08-20 15:56:53

嘿我想做同樣的事情，也使div的高度是相同的圖像，但高度：100％不適用於（可能是因爲絕對positoining） – akabhirav

說@ jeremy-harris！，就像魅力工作！ –

更改您的定位有點：

.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

您需要設置在容器上的相對位置，然後在內部標籤div的絕對。內標籤的絕對定位將相對於外部相對定位的div。你甚至不需要標籤div上的z-index規則。

來源

2013-08-20 15:54:27 j08691

你有正確的想法。在我看來，你只需要將.tag的position:relative更改爲position:absolute，並將position:relative添加到.container即可。

來源

2013-08-20 15:54:41 user1618143

你可能會考慮使用Relative和Absolute positining。

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

我已經有測試過，如果你還希望它改變其位置使用它作爲其保證金：

top: 20px; left: 10px;

它將把它從頂部20個像素，距左側10個像素;但如果沒有必要，請留下這個。

來源

2013-08-20 16:08:10

其實只是增加margin-bottom：-20px;到標籤類固定它。

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

作爲塊元素，div的自然已經確定的邊界，他們儘量不違反。爲了讓它們爲圖像分層，因爲圖像沒有內容，因爲它們沒有結束標記，你只需強迫它們做他們不想做的事情，就像違反它們的自然界限一樣。

.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; 
    }

另一個toue採取將創建div的使用圖像作爲背景，然後永遠放在你喜歡的地方內容。

<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>

來源

2013-08-20 18:04:29

在圖像上浮動Div

回答

相關問題