将 z-index 应用于图像

Question

所以我试图在 WordPress 中通过我的主页显示图像。我可以通过 css，通过小部件显示它，但不能通过将其作为代码添加到我的主页。

我已经尝试应用 z-index，因为我有一个在该部分显示文本图像的元素，但什么都不会显示。

图片html

<div class="fbfp"><img src="http://4309.co.uk/wp-content/uploads/2020/06/IMG_20200601_134623-300x279.jpg" alt="" width="300" height="279" class="size-medium wp-image-16023" /></div>

和html控制主页。

<section class="content- 
area  pt0 "><div id="main" 
class="" role="main">
<div 
id="shapely_home_parallax- 
 2" class="widget 
shapely_home_parallax">      
<section class="cover 
fullscreen image-bg">
<div class="parallax-window 
fullscreen" data- 
parallax="scroll" data- 
image- 
src="http://4309.co.uk/wp-  
content/uploads/2019/0
8/download-2.png" data-ios- 
fix="true" data-over- 
scroll-fix="true" data- 
android-fix="true">
<div class="align- 
transform">
<div class="row">
<div class="top-parallax- 
section">

页面here

在 WordPress 中应该是直截了当的，因为您只需将代码添加到页面上的文本编辑器中。

CSS

.fbfp {position:relative; bottom:300px;z-index: 100;} 

parallax-window 是我认为的操作部分。

Answer 1

如您所知，z-index 仅适用于具有 position:、absolute、fixed 或 relative 和 sticky 的元素。

添加到您的 CSS

.fbfp /*or '.fbfp img' */ {
  position: relative; 
  z-index: 9999; /* or any your value*/ 
}

记住。如果您的图像的任何父元素也有z-index - 它会更强大并且 以z-index 决定其他元素。