的z-index圖像和文本框

之間不工作我有下面的文本框的圖像。我縮放了圖像，並且它越過了文本框，我不希望文本框位於圖像的頂部，但它不適用於z-index。

HTML：

<a href="#"> 
    <img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" /> 
    <div class="text"> 
    This is some text. 
    </div> 
</a>

CSS：

a { 
    height:400px; 
    width:200px; 
    display:block; 
    text-decoration:none; 
    color:black; 
    overflow:hidden; 
} 

img { 
    transform: scale(1.1); 
} 

a:hover .text { 
    color:white; 
    background-color:black; 
} 

.text { 
    text-align:center; 
    height:200px; 
    margin-top:-4px; 
    background-color:white; 
    transition:all 1s ease; 
}

來源

2017-06-06 James Mitchell

看你的代碼，我看你有沒有添加的位置屬性的元素..和z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。看到這裏：https：//www.w3schools.com/cssref/pr_pos_z-index.asp ...所以嘗試添加位置：相對;同時使用z-index – Sarah

嘗試z-index與position:absolute;

.text { text-align:center; height:200px; margin-top:-4px; background-color:white; transition:all 1s ease; position:absolute; bottom:0px; z-index:99; }

a { 
 
    height:400px; 
 
    width:200px; 
 
    display:block; 
 
    text-decoration:none; 
 
    color:black; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 

 
img { 
 
// transform: scale(1.1); 
 
} 
 

 
a:hover .text { 
 
    color:white; 
 
    background-color:black; 
 
} 
 

 
.text { 
 
    text-align:center; 
 
    height:200px; 
 
    margin-top:-4px; 
 
    background-color:white; 
 
    transition:all 1s ease; 
 
    position:absolute; 
 
    bottom:0px; 
 
    z-index:99; 
 
}

<a href="#"> 
 
    <img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" /> 
 
    <div class="text"> 
 
    This is some text. 
 
    </div> 
 
</a>

來源

2017-06-06 18:36:50 XYZ

你在img和transform使用transform開始一個新的堆疊內容。添加position: relative到.text啓動該元素的一個新的堆疊上下文，這樣它會出現在的img

頂部

a { 
 
    height: 400px; 
 
    width: 200px; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: black; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    transform: scale(1.1); 
 
} 
 

 
a:hover .text { 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
.text { 
 
    text-align: center; 
 
    height: 200px; 
 
    margin-top: -4px; 
 
    background-color: white; 
 
    transition: all 1s ease; 
 
    position: relative; 
 
}

<a href="#"> 
 
    <img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" /> 
 
    <div class="text"> 
 
    This is some text. 
 
    </div> 
 
</a>

來源

2017-06-06 18:38:46

使用這一個：

<html> 
<head> 
<style> 
img { 
position: absolute; 
left: 0px; 
top: 0px; 
z-index: -1; 
opacity:.5 
} 
</style> 
</head> 
<body> 

<h1>This is a heading</h1> 

<img src="http://images.meredith.com/content/dam/bhg/Images/2009/07/101422234.jpg.rendition.200sq.jpg" width="500" height="140">

因爲圖像一個-1的z索引，它將放在文本的後面。

來源

2017-06-06 18:43:00

我實際上建議不要在一個元素上加一個負z-索引。從語義上講，爲文本指定更高的z索引可能更好 – TCharb

我想這是你所追求的：

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 
.container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.container div { 
 
    color: white; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all .5s ease; 
 
    width: inherit; 
 
    height: inherit; 
 
    text-align: center; 
 
} 
 

 
.container:hover div { 
 
    opacity: 1; 
 
} 
 
.container div span { 
 
    font-size: 30px; 
 
    line-height: 30px; 
 
    position: relative; 
 
    top: calc(50% - 15px); 
 
    transform: translateY(-50%); 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/400" /> 
 
    <div> 
 
    <span>Image text</span> 
 
    </div> 
 
</div>

來源

2017-06-06 19:17:06 Gerard

的z-index圖像和文本框

回答

相關問題