使元素對齊到絕對定位的元素，如果它是相對

Question

我想創建一個與此關閉按鈕響應彈出旗幟，是我的簡單的方案：

<div class="banner"> 
    <img src="..."> 
    <a href="" class="close-btn">X</a> 
</div> 

我的CSS：

.banner img{ 
    max-width:100%; 
    max-height:100%; 
    position:absolute; 
} 
.close-btn{ 
    position:absolute; 
    right:0; 
    z-index:2; 
    color:red; 
    background:#000; 
    padding:4px; 
} 

由於你可以看到我根據寬度和高度來拉伸圖像。我想close-btn堅持在圖像的右側，並重疊它。要解決此問題，banner必須與圖像的寬度相同。如果banner有position:absolute它的寬度和高度當然是0.

只能用CSS實現嗎？

這裏是提琴：http://jsfiddle.net/fjckls/qq590xz5/

我需要的圖像是響應寬度和高度

Answer 1

爲了使您的形象充分的寬度和高度響應，首先，你需要改變你的單位。您目前使用的是%，這是很好的，但對於「全高度響應」概念，％單位沒有多大幫助。

相反，你應該考慮使用vh（查看高度）和vw（視圖寬度）爲單位，因爲這些都爲實際視用戶可以看到當前。

---

爲了將'x'放置在圖片的右上方，您必須稍微改變一下css。

您可能會爲您的橫幅包含一條CSS規則，首先關閉。喜歡的東西：

.banner { 
    position:relative; 
    display:inline-block; 
} 

雖然去掉「的位置是：絕對的」從你的形象規則，因爲現在你的旗幟格將是你的圖像的大小（不是默認的那個的div被設置爲屏幕的100％「本來）。

---

這留給我們一個問題，你有沒有實際設置你想要的「X」垂直顯示abouts，所以它默認爲「它通常會定位」，其中，在這種情況下，將低於圖像。要解決這個問題，你需要爲你的'x'類添加一個top:或bottom:聲明，在我的情況下，我選擇將它設置爲頂部（top:0;）。

整體小提琴可以顯示here

或在這裏：

.banner img { 
 
    max-width: 100vw; 
 
    max-height: 100vh; 
 
} 
 
.close-btn { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 2; 
 
    color: red; 
 
    background: #000; 
 
    padding: 4px; 
 
} 
 
.banner { 
 
    position: relative; 
 
    display: inline-block; 
 
}

<div class="banner"> 
 
    <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> <a href="" class="close-btn">X</a> 
 

 
</div>

Answer 2

我已經更新了鏈接

http://jsfiddle.net/qq590xz5/3/

<div class="banner"> 
    <div style="position:abolute;"> 
    <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg"> 
    <a href="" class="close-btn">X</a> 
     </div> 
</div> 

.banner img{ 
    max-width:50%; 
    max-height:100%; 

} 
.close-btn{ 
    position:absolute; 
    z-index:2; 
    color:red; 
    top:1%; 
    background:#000; 
    padding:4px; 
} 

看一看

感謝

Answer 3

試試這個..

的Html

<div class="banner"> 
    <img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg"> 
    <a href="" class="close-btn">X</a> 
</div> 

CSS

.banner{ 
    position:relative; 
    width:200px; 
} 

img{ 
    max-width:100%; 
} 

.close-btn{ 
    position:absolute; 
    right:0; 
    top:0; 
    z-index:1; 
    color:red; 
    background:#000; 
    padding:4px; 
} 

Fiddle Demo

Answer 4

我發現了一個解決方案，使圖像右上方的x按鈕保持水平居中和。它涉及：

1）使.banner絕對定位，從每個窗口邊緣留有邊距。這將整個.banner居中，但是如果需要使用用戶視口進行滾動，則可能需要使用固定位置。

只要沒有其他定位元素作爲其父母，它就會工作。

.banner { 
    position: absolute; 
    top: 5%; 
    left: 25%; 
    right: 25%; 
    bottom: 5%; 
} 

2）製作的圖像周圍枝的事情，這將作爲一個定位指南小X.

<div class="shrinkwrap"> 
    <img src="..."> 
    <a href="" class="close-btn">X</a> 
</div> 

.shrinkwrap { 
    /* shrink-wraps this div around its content; 
    as a side-effect, lets this div be centered with text-align: center; */ 
    display: inline-block; 

    /* new positioning context! */ 
    position: relative; 

    /* keeps the responsiveness */ 
    max-width: 100%; 
    height: 100%; 

} 

3）定位熱收縮總是在的中心.banner。

.banner { 
    /* ... */ 
    text-align: center; 
} 

.close-btn { 
    /* ... */ 
    top: 0; 
} 

這樣做的最終版本是在這裏：http://jsfiddle.net/boxmein/qq590xz5/5/